refactor: 移除异步组件写法 @0.9.4-beta.1

package.json

@@ -1,6 +1,6 @@
 {
   "name": "element-pro-crud",
-  "version": "0.9.3-43",
+  "version": "0.9.4-beta.1",
   "author": "BoBo<[email protected]>",
   "main": "lib/pro-crud.js",
   "files": [

src/component/form-designer/index.ts

@@ -1,5 +1,17 @@
+import Vue from 'vue';
 import '@/icons/autoImportSvg'; // 自动导入src/icon目录下的svg图标
+import ProFormItem from '@/component/pro-form/src/ProFormItem.vue';
+import ProLayout from '@/component/pro-form/src/ProLayout.vue';
+import WidgetFormItem from './src/WidgetFormItem.vue';
+import WidgetLayout from './src/WidgetLayout.vue';
 import FormDesigner from './src/FormDesigner.vue';
+
+// 直接在入口处全局注册组件,避免递归嵌套引用报错
+Vue.component(WidgetFormItem.name, WidgetFormItem);
+Vue.component(WidgetLayout.name, WidgetLayout);
+Vue.component('ProFormItem', ProFormItem);
+Vue.component(ProLayout.name, ProLayout);
+
 // 为组件添加 install 方法，用于按需引入
 // eslint-disable-next-line func-names
 FormDesigner.install = function (Vue, options) {

src/component/form-designer/src/WidgetForm.vue

@@ -21,14 +21,14 @@
       >
         <transition-group name="fade" tag="div" class="widget-form-list">
           <template v-for="(element, index) in data.list">
-            <WidgetFormLayout
+            <WidgetLayout
               v-if="element && element.key && (element.type.includes('grid') || element.type.includes('tabs'))"
               :key="element.key"
               :element="element"
               :data="data"
               :select.sync="selectWidget"
               :index="index"
-            ></WidgetFormLayout>
+            ></WidgetLayout>
             <template v-else>
               <WidgetFormItem v-if="element && element.key" :key="element.key" :element="element" :select.sync="selectWidget" :index="index" :data="data"></WidgetFormItem>
             </template>
@@ -42,16 +42,13 @@
 <script>
 import Draggable from 'vuedraggable';
 import SvgIcon from '@/icons/SvgIcon.vue';
-import WidgetFormItem from './WidgetFormItem.vue';
+import Vue from 'vue';
 import WidgetTabs from './components/Tabs/WidgetTabs.vue';
-import WidgetFormLayout from './WidgetLayout.vue';
 
 export default {
   components: {
     Draggable,
-    WidgetFormItem,
     SvgIcon,
-    WidgetFormLayout,
   },
   // 这里的data从父组件接收和设计器实时对应的json
   props: ['data', 'select', 'deviceMode'],

src/component/form-designer/src/components/SubForm/WidgetSubForm.vue

@@ -63,7 +63,6 @@ import { formElement } from '../../componentsConfig';
   name: 'WidgetSubForm',
   components: {
     Draggable,
-    WidgetFormItem: () => import('../../WidgetFormItem.vue'),
   },
 })
 export default class WidgetSubForm extends Vue {

src/component/form-designer/src/components/Tabs/WidgetTabs.vue

@@ -50,8 +50,6 @@ import Draggable from 'vuedraggable';
   name: 'WidgetTabs',
   components: {
     Draggable,
-    WidgetFormItem: () => import('../../WidgetFormItem.vue'),
-    WidgetLayout: () => import('../../WidgetLayout.vue'),
   },
 })
 export default class WidgetTabs extends Vue {

src/component/pro-form/index.ts

@@ -1,5 +1,14 @@
+import Vue from 'vue';
+import CrudTable from '@/component/crud-table/src/CrudTable.vue';
+import ProFormItem from './src/ProFormItem.vue';
+import ProLayout from './src/ProLayout.vue';
 import ProForm from './src/ProForm.vue';
 
+// 直接在入口处全局注册组件,避免递归嵌套引用报错
+Vue.component('ProFormItem', ProFormItem);
+Vue.component(ProLayout.name, ProLayout);
+Vue.component(CrudTable.name, CrudTable);
+
 // eslint-disable-next-line func-names
 ProForm.install = function (Vue, options) {
   if (options) {

src/component/pro-form/src/ProFormItem.vue

@@ -362,7 +362,6 @@ import SubForm from './components/SubForm/index.vue';
     PieChart,
     LineChart,
     AvatarUpload,
-    CrudTable: () => import('@/component/crud-table/src/CrudTable.vue'),
   },
   name: 'ProFormItem',
 })

src/component/pro-form/src/ProLayout.vue

@@ -138,13 +138,11 @@
 <script>
 import { defineComponent, ref, toRef, toRefs, watch, nextTick, watchEffect } from '@vue/composition-api';
 import Tabs from './components/Tabs/index.vue';
-import ProFormItem from './ProFormItem.vue';
 
 export default defineComponent({
   name: 'ProLayout',
   emits: ['table-selections', 'btn-on-click', 'chart-on-click'],
   components: {
-    ProFormItem,
     Tabs,
   },
   props: {

src/component/pro-form/src/components/SubForm/index.vue

@@ -51,7 +51,6 @@ import SvgIcon from '@/icons/SvgIcon.vue';
 @Component({
   name: 'SubForm',
   components: {
-    ProFormItem: () => import('../../ProFormItem.vue'),
     SvgIcon,
   },
 })

src/component/pro-form/src/components/Tabs/index.vue

@@ -20,9 +20,6 @@ import { Component, Vue, Prop, Watch } from 'vue-property-decorator';
 
 @Component({
   name: 'Tabs',
-  components: {
-    ProLayout: () => import('../../ProLayout.vue'),
-  },
 })
 export default class GenerateTabs extends Vue {
   @Prop({