vue3中使用render函数以及组合式写法实现一个配置化生成的表单组件

表单组件代码

import {
    h, computed, ref } from 'vue'
import type {
    PropType } from 'vue'
import {
    Form, Input, Radio, FormItem, Checkbox } from '@arco-design/web-vue'

//去除定义类型中 指定的key
type RestrictKey<T, K extends keyof any> = {
   
  [P in keyof T]: P extends K ? never : T[P];
};

//FormPropsType 类型中的属性与官网form 组件的属性保持一致 但不用再声明model属性
export type FormPropsType =RestrictKey<{
   
  model?: string; 
  items: {
   
    [key: string]: {
   
        type: 'radio' | 'input' | 'checkbox' | 'slot'
        //config 类型中的属性与官网formItem 组件的属性保持一致 但不用再声明field属性
        config: RestrictKey<{
   
          [key: string]: any;
          field?: string; 
      },'field'> //去除field属性 不允许传model属性
        slotFormConfig: {
   
            modelValue: any
            [key: string]: any
        }
    }
}
  [key