Vant Field 输入框组件

发布时间：2023-04-20 11:30:26 所属栏目：教程来源：

导读：表单中的输入框组件

引入
import Vue from 'vue';
import { Field } from 'vant';

Vue.use(Field);
基础用法
可以通过v-model双向绑定输入框的值，通过placeholder设置占位提示文字

<

表单中的输入框组件

引入
import Vue from 'vue';
import { Field } from 'vant';

Vue.use(Field);
基础用法
可以通过v-model双向绑定输入框的值，通过placeholder设置占位提示文字


<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: ''
};
}
}
Tips: digit 类型从 2.4.2 版本开始支持
禁用输入框
通过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'
};
}
};
错误提示
设置required属性表示这是一个必填项，可以配合error或error-message属性显示对应的错误提示

<van-cell-group>
<van-field
v-model="username"
error
required
label="用户名"
placeholder="请输入用户名"
/>
<van-field
v-model="phone"
required
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"
/>

（编辑：汽车网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!