Vant Field 输入框
表单中的输入框组件
import Vue from 'vue'; import { Field } from 'vant'; Vue.use(Field);
可以通过v-model双向绑定输入框的值,通过placeholder设置占位
<!-- Field 是基于 Cell 实现的,可以使用 CellGroup 作为父元素来提供外边框。 --> <van-cell-group> <van-field v-model="value" placeholder="请输入" /> </van-cell-group>
export default { data() { return { value: '' }; } }
根据type定义不同类型的输入框,认值为text
<!-- 输入任意文本 --> <van-field v-model="text" label="文本" /> <!-- 输入手机号,调起手机号 --> <van-field v-model="tel" type="tel" label="手机号" /> <!-- 允许输入整数,调起数字 --> <van-field v-model="digit" type="digit" label="整数" /> <!-- 允许,调起全 --> <van-field v-model="number" type="number" label="数字" /> <!-- 输入密码 --> <van-field v-model="password" type="password" label="密码" />
export default { data() { return { tel: '', text: '', digit: '', number: '', password: '' }; } }
通过readonly将输入框设置为只读状态,通过disabled将输入框设置为禁用状态
<van-cell-group> <van-field label="文本" value="输入框只读" readonly /> <van-field label="文本" value="输入框已禁用" disabled /> </van-cell-group>
通过left-icon和right-icon配置输入框两侧的图标,通过设置clearable在输入过程中展示清除图标
<van-cell-group> <van-field v-model="value1" label="文本" left-icon="smile-o" right-icon="warning-o" placeholder="图标" /> <van-field v-model="value2" clearable label="文本" left-icon="music-o" placeholder="清除图标" /> </van-cell-group>
export default { data() { return { value1: '', value2: '123' }; } };
设置表示这是必填项,可以配合error或error-message对应的
<van-cell-group> <van-field v-model="username" error label="" placeholder="请输入" /> <van-field v-model="phone" label="手机号" placeholder="请输入手机号" error-message="手机号格式" /> </van-cell-group>
通过 button 插槽可以在输入框尾部插入按钮
<van-field v-model="sms" center clearable label="短信验证码" placeholder="请输入短信验证码" > <van-button slot="button" size="small" type="primary">发送验证码</van-button> </van-field>
通过formatter可以对输入的进行格式化
<van-field v-model="value" label="文本" :formatter="formatter" placeholder="格式化输入" />
export default { data() { return { value: '' }; }, methods: { formatter(value) { // 过滤输入的数字 return value.replace(/\d/g, ''); } } }
对于 textarea,可以通过autosize设置高度自适应
<van-field v-model="message" rows="1" autosize label="留言" type="textarea" placeholder="请输入留言" />
设置maxlength和show-word-limit后会在字数
<van-field v-model="message" rows="2" autosize label="留言" type="textarea" maxlength="50" placeholder="请输入留言" show-word-limit />
通过input-align可以设置输入框的对齐方式,可选值为center、right
<van-field v-model="value" :label="文本" :placeholder="输入框右对齐" input-align="right" />
API
除下列事件外,Field 认 Input 所有的原生事件
通过 ref 可以到 Field 实例并实例,详见