refactor: detach the plugin props editor from the plugin; zh: 将组件和组件属性编辑器进行分离

ly525
1 parent f809cdf8
Showing 4 changed files with 143 additions and 100 deletions
front-end/h5/src/components/core/editor/edit-panel/props.js
front-end/h5/src/components/plugins/lbp-slide.js
front-end/h5/src/components/plugins/lbp-slide__editor.js
front-end/h5/src/store/modules/element.js
+import Vue from 'vue'
 import { mapState, mapActions } from 'vuex'
 import { getVM } from '../../../../utils/element'
 export default {
+  data: () => ({
+    loadCustomEditorFlag: false
+  }),
   props: {
     layout: {
       type: String,
@@ -9,12 +13,31 @@ export default {
     }
   },
   computed: {
-    ...mapState('editor', ['editingElement', 'editingElementEditorConfig'])
+    ...mapState('editor', ['editingElement', 'editingElementEditorConfig']),
+    customEditorName () {
+      return `${this.editingElement.name}-custom-editor`
+    }
   },
   methods: {
     ...mapActions('editor', [
       'setEditingElement'
     ]),
+    loadCustomEditorForPlugin () {
+      this.loadCustomEditorFlag = false
+      if (!this.editingElement) return
+
+      if (Vue.component(this.customEditorName)) {
+        this.loadCustomEditorFlag = true
+      } else {
+        import(`../../../plugins/${this.editingElement.name}__editor`).then(component => {
+          this.loadCustomEditorFlag = true
+          Vue.component(this.customEditorName, component.default)
+        }).catch(err => {
+          console.log(err)
+          console.warn('没有发现组件对应的编辑器')
+        })
+      }
+    },
     /**
      * 将插件属性的 自定义增强编辑器注入 属性编辑面板中
      */
@@ -37,9 +60,18 @@ export default {
           layout={this.layout}
         >
           {
+            // plugin-custom-editor
+            this.loadCustomEditorFlag &&
+            h(this.customEditorName, {
+              props: {
+                elementProps: editingElement.pluginProps
+              }
+            })
+          }
+          {
             Object
               .entries(props)
-              .filter(([propKey, obj]) => obj.editor)
+              .filter(([propKey, obj]) => obj.editor && !obj.editor.custom)
               .map(([propKey, obj]) => {
                 const item = obj.editor
                 // https://vuejs.org/v2/guide/render-function.html
@@ -92,5 +124,8 @@ export default {
     if (!ele) return (<span>{this.$t('editor.editPanel.common.empty')}</span>)
     this.mixinEnhancedPropsEditor(ele)
     return this.renderPropsEditorPanel(h, ele)
+  },
+  created () {
+    window.getEditorApp.$on('setEditingElement', this.loadCustomEditorForPlugin)
   }
 }
 import { Swipe, SwipeItem } from 'vant'
 import 'vant/lib/swipe/style'
 import 'vant/lib/swipe-item/style'
-import ImageGallery from '@/components/core/support/image-gallery/gallery.js'
 const defaultItems = [
   {
@@ -12,13 +11,6 @@ const defaultItems = [
   }
 ]
-function getDefaultDataSource () {
-  return {
-    activeIndex: 0,
-    items: defaultItems.slice(0)
-  }
-}
-
 export default {
   name: 'lbp-slide',
   props: {
@@ -28,18 +20,7 @@ export default {
       editor: {
         type: 'a-input-number',
         label: '间隔时间',
-        require: true,
-        defaultPropValue: 4000
-      }
-    },
-    dataSource: {
-      type: Object,
-      default: () => getDefaultDataSource(),
-      editor: {
-        type: 'lbs-slide-items-editor',
-        label: '图片列表',
-        require: true,
-        defaultPropValue: getDefaultDataSource()
+        require: true
       }
     },
     editorMode: {
@@ -48,87 +29,21 @@ export default {
     },
     activeIndex: {
       type: Number,
-      default: 0
+      default: 0,
+      editor: {
+        custom: true
+      }
+    },
+    items: {
+      type: Array,
+      default: () => defaultItems.slice(0),
+      editor: {
+        custom: true
+      }
     }
   },
   editorConfig: {
     components: {
-      'lbs-slide-items-editor': {
-        render () {
-          const currentItem = this.innerItems[this.current - 1] || {}
-          return <div>
-            {
-              <a-pagination
-                current={this.current}
-                onChange={(page) => {
-                  this.current = page
-                  this.$emit('change', {
-                    items: this.innerItems,
-                    activeIndex: page - 1
-                  })
-                }}
-                size="small"
-                total={this.innerItems.length}
-                defaultPageSize={1}
-                itemRender={this.itemRender}
-              />
-            }
-            <ImageGallery
-              style={{ margin: '16px 0' }}
-              value={currentItem.image}
-              onChange={url => {
-                currentItem.image = url
-              }}
-            />
-          </div>
-        },
-        props: {
-          value: {
-            type: Object,
-            default: () => getDefaultDataSource()
-          }
-        },
-        computed: {
-          innerItems () {
-            return this.value.items
-          }
-        },
-        data: () => ({
-          current: 1
-        }),
-        methods: {
-          itemRender (current, type, originalElement) {
-            if (type === 'prev') {
-              return <a-button style={{ marginRight: '8px' }} size="small" icon="minus" onClick={() => this.minus(current)} disabled={this.innerItems.length === 1}></a-button>
-            } else if (type === 'next') {
-              return <a-button style={{ marginLeft: '8px' }} size="small" icon="plus" onClick={this.add}></a-button>
-            }
-            return originalElement
-          },
-          add () {
-            this.$emit('change', {
-              activeIndex: this.innerItems.length,
-              items: [
-                ...this.innerItems,
-                {
-                  image: '',
-                  value: `选项${this.innerItems.length + 1}-value`,
-                  label: `选项${this.innerItems.length + 1}-label`
-                }
-              ]
-            })
-          },
-          minus (index) {
-            if (this.innerItems.length === 1) return
-            const items = this.innerItems.slice(0)
-            items.splice(index, 1)
-            this.$emit('change', {
-              items,
-              activeIndex: index > 0 ? index - 1 : 0
-            })
-          }
-        }
-      }
     }
   },
   mounted () {
@@ -137,7 +52,7 @@ export default {
   },
   render () {
-    const { items, activeIndex } = this.dataSource
+    const { items, activeIndex } = this
     return (
       this.editorMode === 'edit'
         ? items.length && <img src={items[activeIndex].image} />
+import ImageGallery from '@/components/core/support/image-gallery/gallery.js'
+
+export default {
+  props: {
+    elementProps: {
+      type: Object,
+      default: () => ({
+        items: [],
+        activeIndex: 0
+      })
+    }
+  },
+  computed: {
+    innerItems () {
+      return this.elementProps.items
+    }
+  },
+  data: () => ({
+    current: 1
+  }),
+  methods: {
+    itemRender (current, type, originalElement) {
+      if (type === 'prev') {
+        return <a-button style={{ marginRight: '8px' }} size="small" icon="minus" onClick={() => this.minus(current)} disabled={this.innerItems.length === 1}></a-button>
+      } else if (type === 'next') {
+        return <a-button style={{ marginLeft: '8px' }} size="small" icon="plus" onClick={this.add}></a-button>
+      }
+      return originalElement
+    },
+    add () {
+      // this.$emit('change', {
+      //   activeIndex: this.innerItems.length,
+      //   items: [
+      //     ...this.innerItems,
+      //     {
+      //       image: '',
+      //       value: `选项${this.innerItems.length + 1}-value`,
+      //       label: `选项${this.innerItems.length + 1}-label`
+      //     }
+      //   ]
+      // })
+      this.elementProps.items.push({
+        image: '',
+        value: `选项${this.innerItems.length + 1}-value`,
+        label: `选项${this.innerItems.length + 1}-label`
+      })
+    },
+    minus (index) {
+      if (this.innerItems.length === 1) return
+      this.elementProps.items.splice(index, 1)
+      this.elementProps.activeIndex = index > 0 ? index - 1 : 0
+      // const items = this.innerItems.slice(0)
+      // items.splice(index, 1)
+      // this.$emit('change', {
+      //   items,
+      //   activeIndex: index > 0 ? index - 1 : 0
+      // })
+    }
+  },
+  render () {
+    const currentItem = this.innerItems[this.current - 1] || {}
+    return <div>
+      {
+        <a-pagination
+          current={this.current}
+          onChange={(page) => {
+            this.current = page
+
+            this.activeIndex = page - 1
+            // this.$emit('change', {
+            //   items: this.innerItems,
+            //   activeIndex: page - 1
+            // })
+          }}
+          size="small"
+          total={this.innerItems.length}
+          defaultPageSize={1}
+          itemRender={this.itemRender}
+        />
+      }
+      <ImageGallery
+        style={{ margin: '16px 0' }}
+        value={currentItem.image}
+        onChange={url => {
+          currentItem.image = url
+        }}
+      />
+    </div>
+  }
+
+}
@@ -8,6 +8,8 @@ export const actions = {
     const vm = (payload && payload.name) ? getEditorConfigForEditingElement(payload.name) : null
     commit('setEditingElementEditorConfig', vm)
+
+    window.getEditorApp.$emit('setEditingElement')
   },
   setElementPosition ({ commit }, payload) {
     commit('setElementCommonStyle', payload)