2022.10.21更新：

1. grid-item组件改名成vf-grid-item，以解决与VueLayoutGrid组件冲突的问题；
2. SvgIcon组件取消全局注册，改为局部注册。

README.md

@@ -10,7 +10,7 @@
 
 
 ### 立即体验VForm Pro高级版（提供商业支持）
-[Pro Demo](http://120.92.142.115/pro)
+[Pro Demo](https://vform666.com/pages/pro/)
 
 
 ### Vue 3正式版已发布

src/components/form-designer/index.vue

@@ -75,6 +75,7 @@
   import {MOCK_CASE_URL, VARIANT_FORM_VERSION} from "@/utils/config"
   import i18n, { changeLocale } from "@/utils/i18n"
   import axios from "axios"
+  import SvgIcon from '@/components/svg-icon'
 
   export default {
     name: "VFormDesigner",
@@ -85,6 +86,7 @@
       ToolbarPanel,
       SettingPanel,
       VFormWidget,
+      SvgIcon,
     },
     props: {
       /* 后端字段列表API */

src/components/form-designer/toolbar-panel/index.vue

@@ -179,7 +179,7 @@
   import {genSFC} from "@/utils/sfc-generator";
   import loadBeautifier from "@/utils/beautifierLoader";
   import { saveAs } from 'file-saver'
-  import axios from "axios"
+  import SvgIcon from '@/components/svg-icon'
 
   export default {
     name: "ToolbarPanel",
@@ -188,6 +188,7 @@
       VFormRender,
       CodeEditor,
       Clipboard,
+      SvgIcon,
     },
     props: {
       designer: Object

src/components/form-designer/widget-panel/index.vue

@@ -89,6 +89,7 @@
   import {addWindowResizeHandler} from "@/utils/util"
   import i18n from "@/utils/i18n"
   import axios from "axios"
+  import SvgIcon from '@/components/svg-icon'
 
   // import ftImg1 from '@/assets/ft-images/t1.png'
   // import ftImg2 from '@/assets/ft-images/t2.png'
@@ -104,6 +105,7 @@
     mixins: [i18n],
     components: {
       Draggable,
+      SvgIcon,
     },
     props: {
       designer: Object,

src/components/form-render/container-item/grid-col-item.vue

@@ -4,7 +4,7 @@
     <template v-if="!!widget.widgetList && (widget.widgetList.length > 0)">
       <template v-for="(subWidget, swIdx) in widget.widgetList">
         <template v-if="'container' === subWidget.category">
-          <component :is="subWidget.type + '-item'" :widget="subWidget" :key="swIdx" :parent-list="widget.widgetList"
+          <component :is="getComponentByContainer(subWidget)" :widget="subWidget" :key="swIdx" :parent-list="widget.widgetList"
                           :index-of-parent-list="swIdx" :parent-widget="widget">
             <!-- 递归传递插槽！！！ -->
             <template v-for="slot in Object.keys($scopedSlots)" v-slot:[slot]="scope">

src/components/form-render/container-item/grid-item.vue

@@ -28,7 +28,7 @@
   import containerItemMixin from "./containerItemMixin"
 
   export default {
-    name: "grid-item",
+    name: "vf-grid-item", //grid-item跟VueGridLayout全局注册组件重名，故特殊处理！！
     componentName: 'ContainerItem',
     mixins: [emitter, i18n, refMixin, containerItemMixin],
     components: {

src/components/form-render/container-item/tab-item.vue

@@ -8,7 +8,7 @@
                      :disabled="tab.options.disabled" :name="tab.options.name">
           <template v-for="(subWidget, swIdx) in tab.widgetList">
             <template v-if="'container' === subWidget.category">
-              <component :is="subWidget.type + '-item'" :widget="subWidget" :key="swIdx" :parent-list="tab.widgetList"
+              <component :is="getComponentByContainer(subWidget)" :widget="subWidget" :key="swIdx" :parent-list="tab.widgetList"
                               :index-of-parent-list="swIdx" :parent-widget="widget">
                 <!-- 递归传递插槽！！！ -->
                 <template v-for="slot in Object.keys($scopedSlots)" v-slot:[slot]="scope">

src/components/form-render/container-item/table-cell-item.vue

@@ -4,7 +4,7 @@
       :style="{width: widget.options.cellWidth + ' !important' || '', height: widget.options.cellHeight + ' !important' || ''}">
     <template v-for="(subWidget, swIdx) in widget.widgetList">
       <template v-if="'container' === subWidget.category">
-        <component :is="subWidget.type + '-item'" :widget="subWidget" :key="swIdx" :parent-list="widget.widgetList"
+        <component :is="getComponentByContainer(subWidget)" :widget="subWidget" :key="swIdx" :parent-list="widget.widgetList"
                         :index-of-parent-list="swIdx" :parent-widget="widget">
           <!-- 递归传递插槽！！！ -->
           <template v-for="slot in Object.keys($scopedSlots)" v-slot:[slot]="scope">

src/components/form-render/index.vue

@@ -166,6 +166,10 @@
       },
 
       getContainerWidgetName(widget) {
+        if (widget.type === 'grid') {  //grid-item跟VueGridLayout全局注册组件重名，故特殊处理！！
+          return 'vf-grid-item'
+        }
+
         return widget.type + '-item'
       },
 

src/components/form-render/refMixin.js

@@ -18,5 +18,13 @@ export default {
       return this.refList['v_form_ref']
     },
 
+    getComponentByContainer(con) {
+      if (con.type === 'grid') {  //grid-item跟VueGridLayout全局注册组件重名，故特殊处理！！
+        return 'vf-grid-item'
+      }
+
+      return con.type + '-item'
+    },
+
   }
 }

src/extension/samples/card/card-item.vue

@@ -11,7 +11,7 @@
       <template v-if="!!widget.widgetList && (widget.widgetList.length > 0)">
         <template v-for="(subWidget, swIdx) in widget.widgetList">
           <template v-if="'container' === subWidget.category">
-            <component :is="subWidget.type + '-item'" :widget="subWidget" :key="swIdx" :parent-list="widget.widgetList"
+            <component :is="getComponentByContainer(subWidget)" :widget="subWidget" :key="swIdx" :parent-list="widget.widgetList"
                        :index-of-parent-list="swIdx" :parent-widget="widget">
               <!-- 递归传递插槽！！！ -->
               <template v-for="slot in Object.keys($scopedSlots)" v-slot:[slot]="scope">

src/icons/index.js

@@ -1,9 +1,3 @@
-import Vue from 'vue'
-import SvgIcon from '@/components/svg-icon'// svg组件
-
-// register globally
-Vue.component('svg-icon', SvgIcon)
-
 const requireAll = requireContext => requireContext.keys().map(requireContext)
 const req = require.context('./svg', false, /\.svg$/)
 requireAll(req)