徐烜 / bsth-ebus-h5_editor · Commits

Commit 25bd086dd3f56e7a83cb0251f3d199471c38a5dc

Authored by ly525
1 parent e5aefaf7

refactor: load plugin with mixin

Inline Side-by-side
Showing 3 changed files with 70 additions and 107 deletions
front-end/h5/src/components/core/editor/index.js
  View file @25bd086
@@ -67,7 +67,7 @@ export default { @@ -67,7 +67,7 @@ export default {
67 _renderMenuContent () { 67 _renderMenuContent () {
68 switch (this.activeMenuKey) { 68 switch (this.activeMenuKey) {
69 case sidebarMenus[0].value: 69 case sidebarMenus[0].value:
70 - return <RenderShortcutsPanel groups={this.groups} handleClickShortcut={this.clone} /> 70 + return <RenderShortcutsPanel pluginsList={this.pluginsList} handleClickShortcut={this.clone} />
71 case sidebarMenus[1].value: 71 case sidebarMenus[1].value:
72 return ( 72 return (
73 this.pages.map((page, index) => ( 73 this.pages.map((page, index) => (
front-end/h5/src/mixins/load-plugins.js 0 → 100644
  View file @25bd086
  1 +import Vue from 'vue'
  2 +import LbpButton from '../components/plugins/lbp-button'
  3 +import LbpPicture from '../components/plugins/lbp-picture'
  4 +import LbpText from '../components/plugins/lbp-text'
  5 +import LbpFormInput from '../components/plugins/lbp-form-input'
  6 +
  7 +const pluginsList = [
  8 + {
  9 + title: '图片',
  10 + icon: 'photo',
  11 + component: LbpPicture,
  12 + visible: true,
  13 + name: LbpPicture.name
  14 + },
  15 + {
  16 + title: '文字',
  17 + icon: 'font',
  18 + component: LbpText,
  19 + visible: true,
  20 + name: LbpText.name
  21 + },
  22 + {
  23 + title: '按钮',
  24 + icon: 'hand-pointer-o',
  25 + component: LbpButton,
  26 + visible: true,
  27 + name: LbpButton.name
  28 + },
  29 + // {
  30 + // title: '视频',
  31 + // icon: 'play-circle-o',
  32 + // component: LbpVideo,
  33 + // visible: true,
  34 + // name: LbpVideo.name
  35 + // },
  36 + {
  37 + title: '表单输入',
  38 + icon: 'pencil-square-o',
  39 + component: LbpFormInput,
  40 + visible: true,
  41 + name: LbpFormInput.name
  42 + }
  43 + // {
  44 + // title: '表单提交',
  45 + // icon: 'hand-pointer-o',
  46 + // component: LbpFormButton,
  47 + // visible: true,
  48 + // name: LbpFormButton.name
  49 + // },
  50 +]
  51 +
  52 +export default {
  53 + data: () => ({
  54 + pluginsList
  55 + }),
  56 + methods: {
  57 + mixinPlugins2Editor () {
  58 + pluginsList.forEach(plugin => {
  59 + // 全局注册组件，便于以后扩展自定义脚本，注释原来的局部注册：this.$options.components[plugin.name] = plugin.component
  60 + Vue.component(plugin.name, plugin.component)
  61 + })
  62 + }
  63 + },
  64 + created () {
  65 + this.mixinPlugins2Editor()
  66 + }
  67 +}
front-end/h5/src/views/Editor.vue
  View file @25bd086
1 <script> 1 <script>
2 import Vue from 'vue' 2 import Vue from 'vue'
3 import CoreEditor from '../components/core/editor/index.js' 3 import CoreEditor from '../components/core/editor/index.js'
4 -  
5 -import LbpButton from '../components/plugins/lbp-button'  
6 -import LbpPicture from '../components/plugins/lbp-picture'  
7 -import LbpText from '../components/plugins/lbp-text'  
8 -import LbpFormInput from '../components/plugins/lbp-form-input'  
9 -  
10 -const PluginList = [  
11 - {  
12 - title: '文字',  
13 - icon: 'hand-pointer-o',  
14 - component: LbpText,  
15 - visible: true,  
16 - name: 'lbp-text',  
17 - children: [  
18 - {  
19 - title: '文字',  
20 - icon: 'hand-pointer-o',  
21 - component: LbpText,  
22 - visible: true,  
23 - name: 'lbp-text'  
24 - }  
25 - ]  
26 - },  
27 - {  
28 - title: '按钮',  
29 - icon: 'hand-pointer-o',  
30 - component: LbpButton,  
31 - visible: true,  
32 - name: 'lbp-button',  
33 - children: [  
34 - {  
35 - title: '按钮',  
36 - icon: 'hand-pointer-o',  
37 - component: LbpButton,  
38 - visible: true,  
39 - name: 'lbp-button'  
40 - }  
41 - ]  
42 - },  
43 - {  
44 - title: '图片',  
45 - icon: 'image',  
46 - component: LbpPicture,  
47 - visible: true,  
48 - name: 'lbp-picture',  
49 - children: [  
50 - {  
51 - title: '图片',  
52 - icon: 'image',  
53 - component: LbpPicture,  
54 - visible: true,  
55 - name: 'lbp-picture'  
56 - }  
57 - ]  
58 - },  
59 - {  
60 - title: '表单',  
61 - icon: 'wpforms',  
62 - visible: true,  
63 - component: LbpFormInput,  
64 - name: 'lbp-form-input',  
65 - children: [  
66 - {  
67 - title: '输入框',  
68 - icon: 'hand-pointer-o',  
69 - component: LbpFormInput,  
70 - visible: true,  
71 - name: 'lbp-form-input'  
72 - },  
73 - ]  
74 - },  
75 - // {  
76 - // title: '表单2',  
77 - // icon: 'wpforms',  
78 - // visible: true,  
79 - // children: [  
80 - // {  
81 - // title: '输入框',  
82 - // icon: 'hand-pointer-o',  
83 - // component: LbpFormInput,  
84 - // visible: true,  
85 - // name: 'lbp-form-input'  
86 - // },  
87 - // ]  
88 - // }  
89 -] 4 +import loadPluginMixin from '../mixins/load-plugins.js'
90 5
91 export default { 6 export default {
92 extends: CoreEditor, 7 extends: CoreEditor,
93 - computed: {  
94 - // !#zh 显示在侧边栏或顶部的 可用组件列表  
95 - visiblePluginList () {  
96 - return PluginList.filter(p => p.visible)  
97 - },  
98 - groups () {  
99 - return PluginList.filter(p => p.visible)  
100 - }  
101 - },  
102 - methods: {  
103 - mixinPlugins2Editor () {  
104 - PluginList.forEach(plugin => {  
105 - // 全局注册组件，便于以后扩展自定义脚本，注释原来的局部注册：this.$options.components[plugin.name] = plugin.component  
106 - Vue.component(plugin.name, plugin.component)  
107 - })  
108 - }  
109 - },  
110 - created () {  
111 - this.mixinPlugins2Editor()  
112 - } 8 + mixins: [loadPluginMixin],
113 } 9 }
114 </script> 10 </script>
115 <style lang="scss"> 11 <style lang="scss">