VEUI

VEUI on GitHub
Play!EnglishEN
⌘ K | 全文搜索…

Field 表单项

示例

见 Form 示例。

API

属性

名称类型默认值描述
uistring-

预设样式。

值描述
xs超小尺寸样式。
s小尺寸样式。
m中尺寸样式。
l大尺寸样式。
readonlybooleanfalse内部输入组件是否为只读状态。
disabledbooleanfalse内部输入组件是否为禁用状态。
labelstring-表单项标题。
tipstring-表单项浮层提示内容。
namestring-表单项名称，可用于指定数据字段名或展示错误消息的定位。
fieldstring-

非必须，默认取 name 属性值。在特殊情况下，用于指定表单 data 属性对应字段的路径。

值描述
username对应表单 data 属性引用值的 username 属性，等价于 data.username。
users[0]等价于 data.users[0]。
user.username等价于 data.user.username。
rulesstring | Array<Object>-

表单项校验规则，同步的单值校验。对于 Array 类型，项目的类型为 {triggers, name, message, value, validate, priority}。

名称类型描述
triggersstring触发校验的事件名称集合，逗号分隔，支持 <fieldName>:<eventName> 表示当 fieldName 字段发生 eventName 事件时触发校验，可以参考示例内联规则校验。
namestring规则名称。
value*规则要匹配的值。boolean 类型的规则，默认为 true。
messagestring | function

出错信息，可以覆盖规则默认出错信息。

若类型为 string，可以通过 {ruleValue} 引用 ruleValue、{value} 引用 value。例如：

let minLengthRule = {
  validate (value, ruleValue) {
    return !isEmpty(value) ? val.length >= ruleValue : true
  },
  message: '字符长度不能短于 {ruleValue}，当前长度 {value}',
  priority: 100
}

若类型为 function，参数为 (ruleValue: ?*=, value: *)。例如：

let minLengthRule = {
  validate (value, ruleValue) {
    return !isEmpty(value) ? val.length >= ruleValue : true
  },
  message (ruleValue, value) {
    return `字符长度不能短于${ruleValue}，当前长度${value}`
  },
  priority: 100
}
prioritynumber规则优先级，可以覆盖规则默认优先级。
validate(value: unknown, ruleValue: unknown) => boolean内联校验器，用来直接编写验证逻辑，可以参考示例内联规则校验。
名称类型描述
requiredboolean值不能为空值（null / undefined / '' / []）。
numericboolean值必须可描述十进制数值。(6 / 66.6 / 6e6 / '6' / .6)
patternRegExp | string正则匹配。
maxLengthnumber值的 length 属性不能大于限定值。
minLengthnumber值的 length 属性不能小于限定值。
maxnumber值不能大于限定值。
minnumber值不能小于限定值。
helpstring-表单项辅助文案。
help-position'bottom' | 'side''side'

表单项辅助文案的展示位置。

值描述
side辅助文案展示在表单项内的侧边。
bottom辅助文案展示在表单项内的下方，在校验信息之前。
abstractbooleanfalse抽象表单项，抽象的项目没有标题，也不会展示校验信息。
withhold-validitybooleanfalse当设置为 true 时，该表单项内容中的输入组件（如 veui-input ）不会自动绑定校验事件，也不会自动进入 invalid 状态，使用方可以通过 default 插槽来自行定制。
validity-display'normal' | 'simple''simple'

表单项的校验信息是否展示图标。

值描述
normal校验信息展示图标。
simple校验信息不展示图标。
requiredbooleanfalse用来在没有 required 规则时是否显示必要性星号提示。

插槽

名称描述
default用于内联输入组件。插槽参数为 (listeners: object, invalid: boolean, validities: object, readonly: boolean, disabled: boolean)，其中 invalid 是当前表单项是否校验出错误，listeners 是校验时机的事件绑定，validities 是校验信息。
label填充表单项描述的内容。默认为 label 属性的文本值。
tip填充表单项浮层提示的内容。默认为 tip 属性的文本值。
help表单项辅助文本内容。默认为 help 属性的文本值。

图标

名称描述
tip浮层提示的触发图标。

全局配置

配置项类型默认值描述
field.validityDisplay'normal' | 'simple''simple'见 validity-display 属性。

自定义样式

名称类型默认值描述
--dls-field-label-width<length>-表单项标签的宽度。
在 GitHub 上编辑此页面编辑
© Baidu, Inc. 2024