Field 输入框

文档地址: https://vant-contrib.gitee.io/vant/#/zh-CN/field

逻辑上就是 PC 页面中的 input 标签. 表现形式为:

image-20240111164545066

其语法为:

<van-field label="选择日期" 
           :model-value="datePickerValue.join('/')" 
           readonly 
           is-link 
           @click="datepickerShow = true">
</van-field>

其中

  • label 为前置提示文字, 可以带有 placeholder.
  • readonly 表示为只读, 一般结合 picker 之类的输入框输入数据使用, 数据绑定采用单向的 model-value.
  • is-link 与单元格类似, 表示右侧箭头.
  • 如果双向数据绑定采用 v-model 即可.

常用属性

  • 自定义类型, 用于控制输入源, 属性为 type, 可取值: tel(手机号), digit(整数), number(数字), password(密码). 默认是文本. 多行文本使用 textarea. 该取值与 html 中的 type 一样.
  • 只读使用 readonly, 禁用使用 disabled, 禁用会置灰.
  • 自动清除使用 clearable.
  • 配置两端的图标: left-icon 和 right-icon.
  • 必填星号, 使用 required 属性. 注意这里仅仅是样式上显示, 不会进行表单数据校验. 校验需要使用 rule.
  • 自动展示星号, 设置 required="auto", 会根据校验规则来判断是否显示必填星号.
  • 错误提示: error 控制错误状态, error-message 表示错误时的提示.
  • 插入按钮, 组件提供了一个名为 button 的插槽, 来自定义按钮.
  • 格式化输入, 使用 formatter 函数. 配合 formatter-trigger 来配置格式化时机 (略).
  • 高度自适应, 在 type="textarea" 时, 多行文本可以使用 autosize 属性来实现自适应高度.利用 rows="1" 来设置默认高度 (行数).
  • 使用 show-word-limit 和 maxlength 来显示数字统计.
  • 使用 input-align 取值为 center, right, left(默认) 来控制输入框中的输入内容的对齐方式.
  • 使用 label-align 取值为 center, right, left(默认) 来控制输入框中 label 的对齐方式.
  • 作为表单提交时, name 属性是表单提交时的 name.
  • autocomplete 一般会设置为 "off"
  • 表单验证使用 rules 属性. 用法基本逻辑与 AntdVue 一样.
  • 与表单结合使用时, 一般会使用名为 input 的插槽, 其逻辑与 AntdVue 中的 FormItem 一样.

根据输入数据的内容 v-model 的类型是 number 或 string.

Last Updated:
Contributors: jk