徐烜 / 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 67 _renderMenuContent () {
68 68 switch (this.activeMenuKey) {
69 69 case sidebarMenus[0].value:
70   - return <RenderShortcutsPanel groups={this.groups} handleClickShortcut={this.clone} />
  70 + return <RenderShortcutsPanel pluginsList={this.pluginsList} handleClickShortcut={this.clone} />
71 71 case sidebarMenus[1].value:
72 72 return (
73 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 1 <script>
2 2 import Vue from 'vue'
3 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 6 export default {
92 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 10 </script>
115 11 <style lang="scss">
... ...