fix: 修复[email protected]版本antd组件无法注册问题

Kchengz · Feb 17, 2023 · b7b3441 · b7b3441
1 parent 99f8d86
commit b7b3441
Show file tree

Hide file tree

Showing 8 changed files with 10,430 additions and 38 deletions.
diff --git a/README.md b/README.md
@@ -70,10 +70,11 @@ yarn add [email protected]
 // 在main.js引入
 
 // 注：useComponents 需放最上面，优先注册懒加载组件
-import 'k-form-design/packages/core/useComponents'
+import { useAntd } from 'k-form-design/packages/core/useComponents'
 import KFormDesign from 'k-form-design/packages/use.js'
 import 'k-form-design/lib/k-form-design.css'
 
+useAntd(Vue)
 Vue.use(KFormDesign)
 ```
 

diff --git a/docs/zh-cn/guide/start.md b/docs/zh-cn/guide/start.md
@@ -51,19 +51,20 @@ main.js引入
 // 在main.js引入
 
 // 注：useComponents 需放最上面，优先注册懒加载组件
-import 'k-form-design/packages/core/useComponents'
+import { useAntd } from 'k-form-design/packages/core/useComponents'
 import KFormDesign from 'k-form-design/packages/use.js'
 import 'k-form-design/lib/k-form-design.css'
 
+useAntd(Vue)
 Vue.use(KFormDesign)
 ```
 以上代码便完整引入 k-form-design，组件为懒加载方式，并不会一次性加载所有组件
 
 如果您不想使用懒加载的方式使用preUseComponents替换useComponents文件，就可以切换到预加载组件的方式
 
 ```javascript
-- import 'k-form-design/packages/core/useComponents'
-+ import 'k-form-design/packages/core/preUseComponents'
+- import { useAntd } from 'k-form-design/packages/core/useComponents'
++ import { useAntd } from 'k-form-design/packages/core/preUseComponents'
 ```
 
 

diff --git a/examples/main.js b/examples/main.js
@@ -16,7 +16,7 @@ import router from "./router/";
 // 预加载组件
 // import "../packages/core/preUseComponents";
 // 懒加载组件
-import "../packages/core/useComponents";
+import { useAntd } from "../packages/core/useComponents";
 import { nodeSchema } from "../packages/mini";
 import KFormDesign from "../packages/use";
 
@@ -62,6 +62,7 @@ nodeSchema.addSchemaGroup({
 });
 
 Vue.use(KFormDesign);
+useAntd(Vue);
 // KFormDesign.setFormBuildConfig({
 //   dynamicData: {
 //     test: [

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "k-form-design",
-  "version": "3.8.15",
+  "version": "3.8.16",
   "private": false,
   "description": "基于vue、ant-design-vue的表单设计器,可视化开发表单",
   "license": "MIT",

diff --git a/packages/core/preUseAntd.js b/packages/core/preUseAntd.js
@@ -1,7 +1,6 @@
 /**
  * 预加载antd组件
  */
-import Vue from "vue";
 import { pluginManager } from "../utils/index";
 import {
   ConfigProvider,
@@ -58,17 +57,23 @@ pluginManager.addComponent("monthPicker", DatePicker.MonthPicker);
 pluginManager.addComponent("upload", Upload);
 pluginManager.addComponent("uploadDragger", Upload.Dragger);
 
-Vue.use(ConfigProvider);
-Vue.use(Tooltip);
-Vue.use(Empty);
-Vue.use(FormModel);
-Vue.use(Collapse);
-Vue.use(Layout);
-Vue.use(Card);
-Vue.use(Form);
-Vue.use(Row);
-Vue.use(Col);
-Vue.use(Modal);
-Vue.use(Table);
-Vue.use(Tabs);
-Vue.use(Icon);
+/**
+ * 注册Antd组件
+ * @param {*} App
+ */
+export function useAntd(App) {
+  App.use(ConfigProvider);
+  App.use(Tooltip);
+  App.use(Empty);
+  App.use(FormModel);
+  App.use(Collapse);
+  App.use(Layout);
+  App.use(Card);
+  App.use(Form);
+  App.use(Row);
+  App.use(Col);
+  App.use(Modal);
+  App.use(Table);
+  App.use(Tabs);
+  App.use(Icon);
+}
diff --git a/packages/core/useComponents.js b/packages/core/useComponents.js
@@ -4,7 +4,6 @@
  *
  * 当需要更多组件依赖时，在该文件加入即可
  */
-import Vue from "vue";
 import { pluginManager } from "../utils/index";
 import {
   ConfigProvider,
@@ -133,17 +132,23 @@ pluginManager.addComponent(
   async () => (await import("vue-codemirror-lite"))["codemirror"]
 );
 
-Vue.use(ConfigProvider);
-Vue.use(Tooltip);
-Vue.use(Empty);
-Vue.use(FormModel);
-Vue.use(Collapse);
-Vue.use(Layout);
-Vue.use(Card);
-Vue.use(Form);
-Vue.use(Row);
-Vue.use(Col);
-Vue.use(Modal);
-Vue.use(Table);
-Vue.use(Tabs);
-Vue.use(Icon);
+/**
+ * 注册Antd组件
+ * @param {*} App
+ */
+export function useAntd(App) {
+  App.use(ConfigProvider);
+  App.use(Tooltip);
+  App.use(Empty);
+  App.use(FormModel);
+  App.use(Collapse);
+  App.use(Layout);
+  App.use(Card);
+  App.use(Form);
+  App.use(Row);
+  App.use(Col);
+  App.use(Modal);
+  App.use(Table);
+  App.use(Tabs);
+  App.use(Icon);
+}
diff --git a/packages/index.js b/packages/index.js
@@ -2,20 +2,21 @@
 import "../styles/form-design.less";
 // 导入antD样式
 import "./core/antdStyle";
+import Vue from "vue";
 
 // 导出本地iconfont
 import "../static/icons/iconfont";
 import { pluginManager, nodeSchema } from "./utils/index";
 // 导入ant组件
-import "./core/useComponents";
+import { useAntd } from "./core/useComponents";
 
 // 导入单个组件
 import KFormDesign from "./components/KFormDesign/index";
 import KFormPreview from "./components/KFormPreview/index";
 import KFormBuild from "./components/KFormBuild/index";
 import KFormItem from "./components/KFormItem/index";
 import { setFormDesignConfig, setFormBuildConfig } from "./mini";
-
+useAntd(Vue);
 const components = [KFormDesign, KFormBuild, KFormItem, KFormPreview];
 
 const install = function(Vue) {