介绍
表单中的输入框组件
引入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: ''
};
}
}
禁用输入框
通过readonly将输入框设置为只读状态,通过disabled将输入框设置为禁用状态
显示图标
通过left-icon和right-icon配置输入框两侧的图标,通过设置clearable在输入过程中展示清除图标
v-model="value1"
label="文本"
left-icon="smil