vantfieldlabel样式修改_Vant Field 输入框

介绍

表单中的输入框组件

引入import Vue from 'vue';

import { Field } from 'vant';

Vue.use(Field);

代码演示

基础用法

可以通过v-model双向绑定输入框的值，通过placeholder设置占位提示文字

export default {

data() {

return {

value: ''

};

}

}

自定义类型

根据type属性定义不同类型的输入框，默认值为text

export default {

data() {

return {

tel: '',

text: '',

digit: '',

number: '',

password: ''

};

}

}Tips: digit 类型从 2.4.2 版本开始支持

禁用输入框

通过readonly将输入框设置为只读状态，通过disabled将输入框设置为禁用状态

显示图标

通过left-icon和right-icon配置输入框两侧的图标，通过设置clearable在输入过程中展示清除图标

v-model="value1"

label="文本"