Vue3实现自定义vue-json-schema-form组件

项目使用vjsf来快速构建表单，但是有个需求vjsf默认组件无法提供，需要自定义组件来实现复杂交互。
我的vjsf是vue3＋ts+antdv
首先下载指定版本，具体下那个版本可以参考这里：
npm i @lljj/vue3-form-ant
在vue文件中引入：
imprt VueForm from "@lljj/vue3-form-ant";

<VueForm
	v-model="schemaValue"
	:schema="schema"
	:formProps="formProps"
	:uiSchema="primaryUiSchema"
	@change="handleChange"> 
	
	<div slot-scope="{ schemaValue }">div>
VueForm>

参数名	描述	类型	默认值
v-model	表单绑定值	object	{}
schema	用于描述表单数据的 JSON Schema	object	undefined
uiSchema	非必须，页可直接配置在 schema 中，是个用于配置表单展示样式，普通json数据	object	{}
formProps	非必须，当前ui库form组件的参数＋ schema内置的参数	object
change	v-model绑定的值发生变化触发，参数(newVal, oldVal)

目前要实现一个能手动切换下拉框和输入框的组件：
创建一个vue文件，里面写上你要实现的自定内容，然后，关键的数据绑定使用vue3的v-model语法糖：

const emit = defineEmits(['update:modelValue'])

// 值改变了
function handleChange (e: string) {
  emit('update:modelValue', e)
}

写好的自定义组件需要在uiSchema里面配置：

import inputSelectItem from '...' // 自定义组件

uiSchema[title] = { // title就是schema要自定义组件的那个属性名
   "ui:widget": inputSelectItem,
   "ui:options": options // 下拉框的值
}

其中uiSchema配置的下拉框的值可以在上面自定义组件通过props.options获取。
坑点：

1. 如果这个组件有多个基础组件的时候，控制台会报错，但是不影响功能，就是碍眼：
   Warning: [ant-design-vue: Form.Item] FormItem can only collect one field item, you haved set ASelect, ASwitch 2 field items. You can set not need to be collected fields into a-form-item-rest
   
   在不需要双向绑定的基础组件外层包上a-form-item-rest标签就可以了。
   具体的vue-json-schema-form配置和例子可以参考官方文档