register global support components

ly525
1 parent ff7f283b
Showing 7 changed files with 28 additions and 32 deletions
front-end/h5/src/components/core/editor/edit-panel/props.js
front-end/h5/src/components/core/support/image-gallery/gallery.js
front-end/h5/src/components/core/support/index.js
front-end/h5/src/components/plugins/lbp-background.js
front-end/h5/src/components/plugins/lbp-picture.js
front-end/h5/src/components/plugins/lbp-slide__editor.js
front-end/h5/src/views/Editor.vue
@@ -42,6 +42,7 @@ export default {
      * 将插件属性的 自定义增强编辑器注入 属性编辑面板中
      */
     mixinEnhancedPropsEditor (editingElement) {
+      if (!this.editingElementEditorConfig || !this.editingElementEditorConfig.components) return
       const { components } = this.editingElementEditorConfig
       for (const key in components) {
         if (this.$options.components[key]) return
@@ -3,6 +3,7 @@ import PersonalTab from &#39;./tabs/personal.js&#39;
 import PixabayTab from './tabs/pixabay.js'
 export default {
+  name: 'lbs-image-gallery',
   components: {
   },
   props: {
+// register-global-support-component
+import Vue from 'vue'
+import PropMultiTextItemsEditor from './prop-multi-items-editor/text.js'
+import ImageGallery from './image-gallery/gallery.js'
+
+export default {
+  mounted () {
+    Vue.component(PropMultiTextItemsEditor.name, PropMultiTextItemsEditor)
+    Vue.component(ImageGallery.name, ImageGallery)
+  }
+}
-import ImageGallery from '@/components/core/support/image-gallery/gallery.js'
-
 export default {
   name: 'lbp-background',
   render () {
@@ -32,26 +30,21 @@ export default {
   props: {
     imgSrc: {
       type: String,
-      default: ''
-    },
-    backgroundColor: {
-      type: String,
-      // TODO 为什么 transparent 无效？
-      default: '#ffffff'
-    }
-  },
-  editorConfig: {
-    propsConfig: {
-      imgSrc: {
-        type: 'image-gallery',
-        // type: 'a-input',
+      default: '',
+      editor: {
+        type: 'lbs-image-gallery',
         label: '图片url',
         prop: {
           type: 'textarea'
         },
         defaultPropValue: ''
-      },
-      backgroundColor: {
+      }
+    },
+    backgroundColor: {
+      type: String,
+      // TODO 为什么 transparent 无效？
+      default: '#ffffff',
+      editor: {
         type: 'a-input', // lbs-color-picker
         label: '背景颜色',
         prop: {
@@ -60,9 +53,6 @@ export default {
         require: true,
         defaultPropValue: '#ffffff' // TODO why logogram for color does't work?
       }
-    },
-    components: {
-      'image-gallery': ImageGallery
     }
   }
 }
-import ImageGallery from '@/components/core/support/image-gallery/gallery.js'
 import placeholderImg from './lbp-picture-placeholder.png' // issue #34
 export default {
   name: 'lbp-picture',
@@ -10,7 +9,7 @@ export default {
       type: String,
       default: placeholderImg,
       editor: {
-        type: 'image-gallery',
+        type: 'lbs-image-gallery',
         label: '图片url',
         prop: {
           type: 'textarea'
@@ -21,10 +20,5 @@ export default {
   },
   data: () => ({
     placeholderImg
-  }),
-  editorConfig: {
-    components: {
-      'image-gallery': ImageGallery
-    }
-  }
+  })
 }
-import ImageGallery from '@/components/core/support/image-gallery/gallery.js'
-
 export default {
   props: {
     elementProps: {
@@ -79,7 +77,7 @@ export default {
           itemRender={this.itemRender}
         />
       }
-      <ImageGallery
+      <lbs-image-gallery
         style={{ margin: '16px 0' }}
         value={currentItem.image}
         onChange={url => {
 <script>
 import CoreEditor from '../components/core/editor/index.js'
 import loadPluginMixin from '../mixins/load-plugins.js'
+import loadEnhancePropsEditorMixin from '../components/core/support/index.js'
 export default {
   extends: CoreEditor,
-  mixins: [loadPluginMixin]
+  mixins: [loadPluginMixin, loadEnhancePropsEditorMixin]
 }
 </script>
 <style lang="scss">