fix: #107

ly525
1 parent 05c56f89
Showing 5 changed files with 18 additions and 9 deletions
front-end/h5/public/index.html
front-end/h5/src/components/core/editor/shortcuts-panel/index.js
front-end/h5/src/components/core/models/element.js
front-end/h5/src/components/plugins/lbp-form-checkbox-group.js
front-end/h5/src/components/plugins/lbp-form-radio-group.js
@@ -11,6 +11,7 @@
         outline: none;
       }
     </style>
+    <script src="https://code.createjs.com/1.0.0/createjs.min.js"></script>
   </head>
   <body>
     <noscript>
 import ShortcutButton from './shortcut-button'
+import LoadNpmPlugins from './load-npm-plugins.vue'
 import langMixin from '@/mixins/i18n'
 export default {
   mixins: [langMixin],
@@ -12,6 +13,9 @@ export default {
       type: Function
     }
   },
+  data: () => ({
+    npmPackages: []
+  }),
   methods: {
     onClickShortcut (item) {
       if (this.handleClickShortcut) {
@@ -89,7 +93,7 @@ export default {
     return (
       <a-row gutter={20}>
         {
-          this.pluginsList.filter(plugin => plugin.visible).map(plugin => (
+          [].concat(this.pluginsList, this.npmPackages).filter(plugin => plugin.visible).map(plugin => (
             <a-col span={12} style={{ marginTop: '10px' }}>
               <ShortcutButton
                 clickFn={this.onClickShortcut.bind(this, plugin)}
@@ -101,6 +105,9 @@ export default {
             </a-col>
           ))
         }
+        <LoadNpmPlugins onLoadComplete={npmPackages => {
+          this.npmPackages = npmPackages
+        }} />
       </a-row>
     )
   }
@@ -31,7 +31,7 @@ class Element {
      * 3. 为何需要 clone，因为会有 element.clone() 以及 page.clone()，
      *    element.pluginProps 和 elementcommonStyle 是引用类型，如果不做 deep_clone 可能会出现意外错误
      */
-    this.pluginProps = (typeof ele.pluginProps === 'object' && cloneObj(ele.pluginProps)) || this.getDefaultPluginProps(ele.editorConfig || {})
+    this.pluginProps = (typeof ele.pluginProps === 'object' && cloneObj({ ...ele.pluginProps, uuid: this.uuid })) || this.getDefaultPluginProps(ele.editorConfig || {})
     this.commonStyle = (typeof ele.commonStyle === 'object' && cloneObj(ele.commonStyle)) || { ...defaultStyle, zindex: ele.zindex }
     this.events = []
     this.animations = ele.animations || []
@@ -39,7 +39,9 @@ class Element {
   // init prop of plugin
   getDefaultPluginProps (propsConfig) {
-    const pluginProps = {}
+    const pluginProps = {
+      uuid: this.uuid
+    }
     Object.keys(propsConfig).forEach(key => {
       // #6
       if (key === 'name') {
 import LbpFormRadio from './lbp-form-radio.js'
-import { genUUID } from '../../utils/element.js'
 const defaultItems = [
   {
@@ -21,7 +20,7 @@ export default {
   props: {
     aliasName: {
       type: String,
-      default: `标题演示-${genUUID().slice(0, 6)}`,
+      default: `标题演示`,
       editor: {
         type: 'a-input',
         label: '填写标题',
@@ -110,7 +109,7 @@ export default {
   render () {
     return (
       <div>
-        <h3>{this.aliasName}{this.type}</h3>
+        <h3>{this.aliasName}</h3>
         <input type="text" hidden value={this.value_} data-type="lbp-form-input" data-uuid={this.uuid} />
         {
           this.items.map(item => (
@@ -118,7 +117,7 @@ export default {
               vertical
               value={item.value}
               checked={this.type === 'radio' ? this.value === item.value : this.value.includes(item.value)}
-              aliasName={this.aliasName}
+              aliasName={this.uuid}
               type={this.type}
               onChange={this.onChange}
             >{item.value}</lbp-form-radio>
@@ -18,7 +18,7 @@ export default {
   props: {
     aliasName: {
       type: String,
-      default: `标题演示-${genUUID().slice(0, 6)}`,
+      default: `标题演示`,
       editor: {
         type: 'a-input',
         label: '填写标题',
@@ -115,7 +115,7 @@ export default {
               vertical
               value={item.value}
               checked={this.value === item.value}
-              aliasName={this.aliasName}
+              aliasName={this.uuid}
               type={this.type}
               onChange={this.onChange}
             >{item.value}