Form
简易介绍
form表单组件，用于收集用户输入的数据并进行校验。
form表单的实现标签有两种<MYForm></MYForm>或者<MYForm />和<MYForm-item></MYForm-item>或者<MYForm-item />。来实现表单
基础用法
使用v-model绑定表单数据，通过rules属性设置校验规则。
代码演示
展开代码
多种表单控件
表单支持多种控件类型，包括输入框、开关、单选框、复选框等。
代码演示
展开代码
行内布局
使用inline属性可以设置表单为行内布局。
代码演示
展开代码
自定义标签宽度
使用labelWidth属性可以自定义标签的宽度。
代码演示
展开代码
不同尺寸
使用size属性可以设置表单的尺寸。
代码演示
展开代码
验证触发器
使用validateTrigger属性可以设置验证触发的时机。
代码演示
展开代码
禁用状态
使用disabled属性可以禁用整个表单。
代码演示
展开代码
组合使用
最后，实现个多种api组合使用实现个完整表单：
代码演示
展开代码
API 参考
Form Props
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| modelValue | 表单数据 | object | — | {} |
| rules | 校验规则 | object | — | {} |
| labelWidth | 标签宽度 | string | number | 支持像素值和auto | 'auto' |
| inline | 是否行内布局 | boolean | — | false |
| size | 表单大小 | string | large/medium/small/mini | 'medium' |
| disabled | 是否禁用 | boolean | — | false |
FormItem Props
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| label | 标签名 | string | — | '' |
| prop | 字段名 | string | — | '' |
| validateTrigger | 验证触发器 | string | blur/change | 'blur' |
| rules | 校验规则 | object | — | {} |
| labelWidth | 标签宽度 | string | number | — | — |
| size | 表单项大小 | string | large/medium/small/mini | 'medium' |
| inline | 是否行内布局 | boolean | — | false |
| disabled | 是否禁用 | boolean | — | false |
Form Methods
| 方法名 | 说明 | 参数 |
|---|---|---|
| validate | 验证整个表单 | — |
| validateField | 验证指定字段 | prop: string |
| resetFields | 重置表单 | — |
| clearValidate | 清除验证状态 | field?: string |
类型定义
typescript
interface FormRule {
required?: boolean;
message?: string;
validator?: (rule: FormRule, value: string) => boolean | Promise<boolean>;
len?: number;
}
interface FormProps {
modelValue?: Record<string, any>;
rules?: Record<string, FormRule[]>;
labelWidth?: string | number;
inline?: boolean;
size?: 'large' | 'medium' | 'small' | 'mini';
disabled?: boolean;
}
interface FormItemProps {
label?: string;
prop?: string;
validateTrigger?: 'blur' | 'change';
rules?: Record<string, FormRule[]>;
labelWidth?: string | number;
size?: 'large' | 'medium' | 'small' | 'mini';
inline?: boolean;
disabled?: boolean;
}