Navuelidate

A lib to create form easier with naive-ui and vuelidate and vueuse

Navuelidate 是一个表单生成器库，包含表单生成器组件和对应的 composable 函数、工具类型/函数、表单校验工具函数

Usage

<template>
    <FormCreator v-model="formData" :form-list="formList" :cols="4" :scope="validateScope" />
</template>

import { useFormCreator } from 'navuelidate';
import { FormType } from 'navuelidate';
import { h } from "vue"

const validateScope = Symbol('roleQueryForm');
const { formData, resetForm, createFormListItem, renderFormListItem } = useFormCreator({
    defaultData: {
        roleName: '',
        roleKey: '',
    },
    scope: validateScope,
});

const formList = shallowRef([
    createFormListItem(
        {
            key: 'roleName',
            formType: FormType.Input,
        },
        {
            label: 'roleName',
        },
    ),
    createFormListItem(
        {
            key: 'select',
            formType: FormType.Select,
        },
        {
            label: 'roleKey',
            props: {
                options: []
            }
        },
    ),
    renderFormListItem(
        () => {
            return h("div", "custom render");
        },
        {
            formItemGiProps: {
                suffix: true,
            },
        },
    ),
]);

Component

Component FormCreator

组件用于生成 naive-ui 表单, 需配合 useFormCreator 使用

Props	Type	Default	Description
cols	?number	4	表单每行有几个表单项
scope	Symbol	undefined	必传，表单域名标记
rules	?ValidationArgs<Record<string, unknown>>	undefined	表单验证规则
modelalue	Record<strinng,unkown>	undefined	必填，表单数据对象
formList	Array<FormListItemRender | FormListItem>	[]	表单项列表

此外，可以接收 NGrid 组件的所有 props

Type FormListItem

Property	Type	Default	Description
label	string	""	表单项的 label
modelValue	keyof Data | [keyof Data, keyof Data]	undefined	必填，表单项的双向绑定变量，T 泛型为传入的数据 Model 的类型 （默认是 defaultData的类型）
span	number	undefined	表单项占这一行的份额，最大 24 最小 1
formType	FormType	FormType.Input	必填，表单项类型
props	InstanceType<typeof formType>['$props']	undefined	对应表单类型的组件的 props
slots	所使用的 naive-ui 表单项的slots	undefined	表单项的slots
formItemGiProps	NFormItemGi 的 props	undefined	包裹表单控件的 NFormItemGi 的 props
formItemGiSlots	{label?:()=>VNodeChild,feedback?:()=>VNodeChild,prefix?:()=>VNodeChild,suffix?:()=>VNodeChild}	undefine	包裹表单控件的 NFormItemGi 的 slots, 除默认的 label 和 'feedback' 以外，额外添加了 prefix 和 suffix 以在表单组件前后添加别的内容

Type FormListItemRender

Property	Type	Default	Description
span	number	undefined	表单项占这一行的份额，最大 24 最小 1
render	() => VNode	undefined	自定义渲染函数
formItemGiProps	NFormItemGi 的 props	undefined	包裹表单控件的 NFormItemGi 的 props

目前支持的 formType 组件: [Input,Select,TreeSelect,InputNumber, RadioGroup,CheckBoxGroup,DatePicker,NCascader]

对应的组件 props 可参考 naive-ui 文档

Composable

Function useFormCreator

表单生成器组件辅助 composable 函数，需配合 FormCreator 组件使用

Params

Property	Type	Default	Description
defaultData	Record<string, unknown>	undefined	必填，表单默认值
scope	Symbol	undefined	必填，表单域名标记，Vuelidate 的 scope
rules	Ref<Vargs extends ValidationArgs>	Vargs	表单验证规则
globalFormItemGiProps	FormItemGiProps | (() => FormItemGiProps) | Ref<FormItemGiProps>	undefined	全局给表单项的 FormItemGi 传递的 props

表单验证规则参考 Vuelidate 文档

ReturnType

Property	Type	Description
v$	Ref<Validation<Vargs, unknown>>	Vuelidate 的 v$ 对象
formData	Ref<Record<string, unknown>>	表单数据对象 Ref
resetForm	() => void	重置表单函数，运行后 formData.value 会被重置为参数的 defaultData
createFormListItem	CreateFormListItem	表单项注册辅助工具函数

Function createFormListItem

表单项生成辅助函数

Params

Property	Type	Description
{ key, formType }	{ key: string | [string,string], formType: FormType }	一个对象，包含 key ,formType, key 为表单数据对象 formData.value 的键名之一， 会由 ts 自动推导，formType 为目前支持的表单类型之一
config	FormListItem	FormListItem 配置项，会根据第一个参数的 formType 自动收窄类型

ReturnType

FormListItem

Function renderFormListItem

表单项生成辅助函数（自定义渲染）

Params

Property	Type	Description
render	() => VNode	自定义表单项渲染函数
config	FormListItemRender	FormListItemRender 配置项

ReturnType

FormListItemRender

全局默认设置

createDefaultSettings

• 参数:
  • formItemGiProps 传递给 formItemGi 的 props
  • formItemProps 传递给每个表单项的 props，函数，参数为 FormType