Merge pull request #297 from lljj-x/feat/some-feature

Feat/some feature

Author: lljj-x

packages/docs/docs/README.md

@@ -17,7 +17,7 @@ actionLink: /zh/guide/
 ``` bash
 # 安装
 # vue2+elementUi 版本
-npm install --save @lljj/vue-json-schema-form
+npm install --save @lljj/vue-json-schema-form element-ui
 
 # 或者：
 yarn add @lljj/vue-json-schema-form
@@ -36,6 +36,11 @@ yarn add @lljj/vue-json-schema-form
 <script >
 //  使用
 import VueForm from '@lljj/vue-json-schema-form';
+import Vue from 'vue';
+import ElementUI from 'element-ui';
+
+// 需要配置element全局组件，也可以按需use component
+Vue.use(ElementUI);
 
 export default {
     name: 'Demo',

packages/docs/docs/zh/guide/README.md

@@ -19,34 +19,39 @@
 
 ### @lljj/vue-json-schema-form
 * 适配ui库：`Vue2` `ElementUi`
+  * 注意需要全局注册Element相关组件，也可根据控制台提示按需use
 * package name: `@lljj/vue-json-schema-form`
 * umd cdn地址：[@lljj/vue-json-schema-form cdn](https://npm.elemecdn.com/@lljj/vue-json-schema-form/dist/vueJsonSchemaForm.umd.min.js)
 * umd script 标签形式引入暴露全局变量 `window.vueJsonSchemaForm`，`window.vueJsonSchemaForm.default` 暴露组件，同时会注册 `VueForm` 全局组件
 * [playground](https://form.lljj.me/#/demo?type=Simple)
 
 ### @lljj/vue2-form-iview3
 * 适配ui库：`Vue2` `iview3`
+  * 注意需要全局注册 iview3 相关组件，也可根据控制台提示按需use
 * package name: `@lljj/vue2-form-iview3`
 * umd cdn地址：[@lljj/vue2-form-iview3 cdn](https://npm.elemecdn.com/@lljj/vue2-form-iview3/dist/vue2-form-iview3.umd.min.js)
 * umd script 标签形式引入暴露全局变量 `window.vue2FormIview3`，`window.vue2FormIview3.default` 暴露组件，同时会注册 `vue2FormIview3` 全局组件
 * [playground](https://form.lljj.me/#/demo?type=Simple&ui=VueIview3Form)
 
 ### @lljj/vue3-form-element
 * 适配ui库：`Vue3` `ElementPlus`
+    * 注意需要全局注册 ElementPlus 相关组件，也可根据控制台提示按需use
 * package name : `@lljj/vue3-form-element`
 * umd cdn地址：[@lljj/vue3-form-element cdn](https://npm.elemecdn.com/@lljj/vue3-form-element/dist/vue3-form-element.umd.min.js)
 * umd script 标签形式引入暴露全局变量 `window.vue3FormElement`，`window.vue3FormElement.default` 暴露组件
 * [playground](https://form.lljj.me/v3/#/demo?type=Simple)
 
 ### @lljj/vue3-form-naive
-* 适配ui库：`Vue3` `antdv`
+* 适配ui库：`Vue3` `naive`
+  * 注意需要全局注册 vue3 naive 相关组件，也可根据控制台提示按需use
 * package name : `@lljj/vue3-form-naive`
 * umd cdn地址：[@lljj/vue3-form-naive cdn](https://npm.elemecdn.com/@lljj/vue3-form-naive/dist/vue3-form-naive.umd.min.js)
 * umd script 标签形式引入暴露全局变量 `window.vue3FormNaive`，`window.vue3FormNaive.default` 暴露组件
 * [playground](https://form.lljj.me/v3/#/demo?type=Simple&ui=VueNaiveForm)
 
 ### @lljj/vue3-form-ant
 * 适配ui库：`Vue3` `antdv`
+    * 注意需要全局注册 vue3 antdv 相关组件，也可根据控制台提示按需use
 * package name : `@lljj/vue3-form-ant`
 * umd cdn地址：[@lljj/vue3-form-ant cdn](https://npm.elemecdn.com/@lljj/vue3-form-ant/dist/vue3-form-ant.umd.min.js)
 * umd script 标签形式引入暴露全局变量 `window.vue3FormAnt`，`window.vue3FormAnt.default` 暴露组件

packages/docs/docs/zh/guide/basic-config.md

@@ -789,9 +789,7 @@ schema = {
 * 类型：`object`
 `form-props` 支持如下两部分参数：
 
-* 固定参数部分
-
-和当前使用的ui库无关
+1. 固定参数部分 (这部分参数和当前使用的ui库无关)
 ```js
 // 默认值
 formProps = {
@@ -802,11 +800,12 @@ formProps = {
     labelPosition: 'top', // 表单域标签的位置
     isMiniDes: false, // 是否优先mini形式显示描述信息（label文字和描述信息同行显示）
     defaultSelectFirstOption: true, // 单选框必填，是否默认选中第一个
+    popover: {}, // 透传给ui 组件库的popver组件，比如element ui Popover，antd a-popover
 }
 ```
 
-* 当前ui库form组件的参数
-如上固定参数以外的参数，都会传给当前ui库的form组件，比如elementUi el-form、IView i-form ...
+2. 当前ui库form组件的参数
+如上固定参数以外的参数，都会透传给当前ui库的form组件，比如elementUi el-form、IView i-form ...
 ```js
 formProps = {
     layoutColumn: 2, // 1 2 3 ，支持 1 2 3 列布局，如果使用inline表单这里配置无效

packages/docs/docs/zh/guide/faq.md

@@ -1,5 +1,11 @@
 # 常见问题
 
+## Vue2、Vue3 提示相关的ui组件找不到
+* https://github.com/lljj-x/vue-json-schema-form/issues/169
+* https://github.com/lljj-x/vue-json-schema-form/issues/268
+
+vue2 注册全局组件，或者vue3注册当前app实例公共组件
+
 ## select筛选框的值可以动态配置吗
 
 * 基于 JsonSchema 的方案，配置 `enum` 和 `enumNames` 动态更新即可， schema原本也为响应式数据

packages/lib/utils/formUtils.js

@@ -99,7 +99,8 @@ export function getUiField(FIELDS_MAP, {
     }
 
     // 不支持的类型
-    throw new Error(`不支持的field类型 ${schema.type}`);
+    console.error('当前schema:', schema);
+    throw new Error(`不支持的field类型, type: ${schema.type}`);
 }
 
 // 解析用户配置的 uiSchema options

packages/lib/vue2/vue2-core/src/components/Widget.js

@@ -202,7 +202,8 @@ export default {
             },
             props: {
                 placement: 'top',
-                trigger: 'hover'
+                trigger: 'hover',
+                ...self.formProps?.popover
             }
         }, [
             descriptionVNode,

packages/lib/vue2/vue2-core/src/index.js

@@ -142,7 +142,7 @@ export default function createForm(globalOptions = {}) {
 
             const {
                 // eslint-disable-next-line no-unused-vars
-                layoutColumn = 1, inlineFooter, labelSuffix, isMiniDes, defaultSelectFirstOption, ...uiFormProps
+                layoutColumn = 1, inlineFooter, labelSuffix, isMiniDes, defaultSelectFirstOption, popover, ...uiFormProps
             } = self.$props.formProps;
 
             const { inline = false, labelPosition = 'top' } = uiFormProps;

packages/lib/vue3/vue3-core/src/components/Widget.js

@@ -198,7 +198,8 @@ export default {
                     cursor: 'pointer'
                 },
                 placement: 'top',
-                trigger: 'hover'
+                trigger: 'hover',
+                ...props.formProps?.popover
             }, {
                 default: () => descriptionVNode,
                 reference: () => h(IconQuestion)

packages/lib/vue3/vue3-core/src/index.js

@@ -142,7 +142,7 @@ export default function createForm(globalOptions = {}) {
             return () => {
                 const {
                     // eslint-disable-next-line no-unused-vars
-                    layoutColumn = 1, inlineFooter, labelSuffix, isMiniDes, defaultSelectFirstOption, ...uiFormProps
+                    layoutColumn = 1, inlineFooter, labelSuffix, isMiniDes, defaultSelectFirstOption, popover, ...uiFormProps
                 } = props.formProps;
 
                 const { inline = false, labelPosition = 'top' } = uiFormProps;