Navuelidate NPM

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` 自动收窄类型