徐烜 / bsth-ebus-h5_editor · Commits

Commit 1102fe322f4c82b12a80e4ed77e1762e2220e281

Authored by ly525
1 parent 25bd086d

refactor: load plugin with mixin

Inline Side-by-side
Showing 1 changed file with 68 additions and 53 deletions
front-end/h5/src/components/core/editor/shortcuts-panel/index.js
  View file @1102fe3
1 import ShortcutButton from './shortcut-button' 1 import ShortcutButton from './shortcut-button'
2 export default { 2 export default {
3 props: { 3 props: {
4 - groups: { 4 + pluginsList: {
5 required: false, 5 required: false,
6 type: Array, 6 type: Array,
7 default: () => [] 7 default: () => []
@@ -15,74 +15,89 @@ export default { @@ -15,74 +15,89 @@ export default {
15 if (this.handleClickShortcut) { 15 if (this.handleClickShortcut) {
16 this.handleClickShortcut(item) 16 this.handleClickShortcut(item)
17 } 17 }
18 - }, 18 + }
19 /** 19 /**
20 * #!zh 渲染多个插件的快捷方式 20 * #!zh 渲染多个插件的快捷方式
21 * #!en render shortcuts for multi plugins 21 * #!en render shortcuts for multi plugins
22 * @param {Object} group: {children, title, icon} 22 * @param {Object} group: {children, title, icon}
23 */ 23 */
24 - renderMultiShortcuts (group) {  
25 - const plugins = group.children  
26 - return <a-popover  
27 - placement="bottom"  
28 - class="shortcust-button"  
29 - trigger="hover">  
30 - <a-row slot="content" gutter={20} style={{ width: '400px' }}>  
31 - {  
32 - plugins.sort().map(item => (  
33 - <a-col span={6}>  
34 - <ShortcutButton  
35 - clickFn={this.onClickShortcut.bind(this, item)}  
36 - title={item.title}  
37 - faIcon={item.icon}  
38 - />  
39 - </a-col>  
40 - ))  
41 - }  
42 - </a-row>  
43 - <ShortcutButton  
44 - title={group.title}  
45 - faIcon={group.icon}  
46 - />  
47 - </a-popover>  
48 - }, 24 + // renderMultiShortcuts (group) {
  25 + // const plugins = group.children
  26 + // return <a-popover
  27 + // placement="bottom"
  28 + // class="shortcust-button"
  29 + // trigger="hover">
  30 + // <a-row slot="content" gutter={20} style={{ width: '400px' }}>
  31 + // {
  32 + // plugins.sort().map(item => (
  33 + // <a-col span={6}>
  34 + // <ShortcutButton
  35 + // clickFn={this.onClickShortcut.bind(this, item)}
  36 + // title={item.title}
  37 + // faIcon={item.icon}
  38 + // />
  39 + // </a-col>
  40 + // ))
  41 + // }
  42 + // </a-row>
  43 + // <ShortcutButton
  44 + // title={group.title}
  45 + // faIcon={group.icon}
  46 + // />
  47 + // </a-popover>
  48 + // },
49 /** 49 /**
50 * #!zh: 渲染单个插件的快捷方式 50 * #!zh: 渲染单个插件的快捷方式
51 * #!en: render shortcut for single plugin 51 * #!en: render shortcut for single plugin
52 * @param {Object} group: {children, title, icon} 52 * @param {Object} group: {children, title, icon}
53 */ 53 */
54 - renderSingleShortcut ({ children }) {  
55 - const [plugin] = children  
56 - return <ShortcutButton  
57 - clickFn={this.onClickShortcut.bind(this, plugin)}  
58 - title={plugin.title}  
59 - faIcon={plugin.icon}  
60 - />  
61 - }, 54 + // renderSingleShortcut ({ children }) {
  55 + // const [plugin] = children
  56 + // return <ShortcutButton
  57 + // clickFn={this.onClickShortcut.bind(this, plugin)}
  58 + // title={plugin.title}
  59 + // faIcon={plugin.icon}
  60 + // />
  61 + // },
62 /** 62 /**
63 * #!zh: 在左侧或顶部导航上显示可用的组件快捷方式，用户点击之后，即可将其添加到中间画布上 63 * #!zh: 在左侧或顶部导航上显示可用的组件快捷方式，用户点击之后，即可将其添加到中间画布上
64 * #!en: render shortcust at the sidebar or the header. if user click the shortcut, the related plugin will be added to the canvas 64 * #!en: render shortcust at the sidebar or the header. if user click the shortcut, the related plugin will be added to the canvas
65 * @param {Object} group: {children, title, icon} 65 * @param {Object} group: {children, title, icon}
66 */ 66 */
67 - renderShortCutsPanel (groups) {  
68 - return (  
69 - <a-row gutter={20}>  
70 - {  
71 - groups.sort().map(group => (  
72 - <a-col span={12} style={{ marginTop: '10px' }}>  
73 - {  
74 - group.children.length === 1  
75 - ? this.renderSingleShortcut(group)  
76 - : this.renderMultiShortcuts(group)  
77 - }  
78 - </a-col>  
79 - ))  
80 - }  
81 - </a-row>  
82 - )  
83 - } 67 + // renderShortCutsPanel (groups) {
  68 + // return (
  69 + // <a-row gutter={20}>
  70 + // {
  71 + // groups.sort().map(group => (
  72 + // <a-col span={12} style={{ marginTop: '10px' }}>
  73 + // {
  74 + // group.children.length === 1
  75 + // ? this.renderSingleShortcut(group)
  76 + // : this.renderMultiShortcuts(group)
  77 + // }
  78 + // </a-col>
  79 + // ))
  80 + // }
  81 + // </a-row>
  82 + // )
  83 + // }
84 }, 84 },
85 render (h) { 85 render (h) {
86 - return this.renderShortCutsPanel(this.groups) 86 + // return this.renderShortCutsPanel(this.groups)
  87 + return (
  88 + <a-row gutter={20}>
  89 + {
  90 + this.pluginsList.map(plugin => (
  91 + <a-col span={12} style={{ marginTop: '10px' }}>
  92 + <ShortcutButton
  93 + clickFn={this.onClickShortcut.bind(this, plugin)}
  94 + title={plugin.title}
  95 + faIcon={plugin.icon}
  96 + />
  97 + </a-col>
  98 + ))
  99 + }
  100 + </a-row>
  101 + )
87 } 102 }
88 } 103 }