vantfieldlabel样式修改_VantField输⼊框介绍
表单中的输⼊框组件
引⼊import Vue from 'vue';
import { Field } from 'vant';
Vue.use(Field);
代码演⽰
基础⽤法
可以通过v-model双向绑定输⼊框的值，通过placeholder设置占位提⽰⽂字
export default {
data() {
return {
value: ''
};
}
}
⾃定义类型
根据type属性定义不同类型的输⼊框，默认值为textinput标签placeholder属性
export default {
data() {
return {
tel: '',
text: '',
digit: '',
number: '',
password: ''
};
}
}
禁⽤输⼊框
通过readonly将输⼊框设置为只读状态，通过disabled将输⼊框设置为禁⽤状态
显⽰图标
通过left-icon和right-icon配置输⼊框两侧的图标，通过设置clearable在输⼊过程中展⽰清除图标
v-model="value1"
label="⽂本"
left-icon="smile-o"
right-icon="warning-o"
placeholder="显⽰图标"
/>
v-model="value2"
clearable
label="⽂本"
left-icon="music-o"
placeholder="显⽰清除图标"
/>
export default {
data() {
return {
value1: '',
value2: '123'
};
}
};
错误提⽰
设置required属性表⽰这是⼀个必填项，可以配合error或error-message属性显⽰对应的错误提⽰v-model="username"
error
required
label="⽤户名"
placeholder="请输⼊⽤户名"
/>
v-model="phone"
required
label="⼿机号"
placeholder="请输⼊⼿机号"
error-message="⼿机号格式错误"
/>
插⼊按钮
通过 button 插槽可以在输⼊框尾部插⼊按钮
v-model="sms"
center
clearable
label="短信验证码"
placeholder="请输⼊短信验证码"
>
发送验证码
格式化输⼊内容
通过formatter属性可以对输⼊的内容进⾏格式化
v-model="value"
label="⽂本"
:formatter="formatter"
placeholder="格式化输⼊内容"
/>export default {
data() {
return {
value: ''
};
},
methods: {
formatter(value) {
/
/ 过滤输⼊的数字
place(/\d/g, '');
}
}
}
⾼度⾃适应
对于 textarea，可以通过autosize属性设置⾼度⾃适应v-model="message"
rows="1"
autosize
label="留⾔"
type="textarea"
placeholder="请输⼊留⾔"
/>
显⽰字数统计
设置maxlength和show-word-limit属性后会在底部显⽰字数统计
v-model="message"
rows="2"
autosize
label="留⾔"
type="textarea"
maxlength="50"
placeholder="请输⼊留⾔"
show-word-limit
/>
输⼊框内容对齐
通过input-align属性可以设置输⼊框内容的对齐⽅式，可选值为center、right v-model="value"
:label="⽂本"
:placeholder="输⼊框内容右对齐"
input-align="right"
/>
API
Propslabel输⼊框左侧⽂本string-
value当前输⼊的值number | string-
type输⼊框类型, 可选值为 tel digit
number textarea password 等stringtext
size⼤⼩，可选值为 largestring-
maxlength输⼊的最⼤字符数number | string-
placeholder占位提⽰⽂字string-
border是否显⽰内边框booleantrue
disabled是否禁⽤输⼊框booleanfalse
readonly是否只读booleanfalse
required是否显⽰表单必填星号booleanfalse
clearable是否启⽤清除控件booleanfalse
clickable是否开启点击反馈booleanfalse
is-link是否展⽰右侧箭头并开启点击反馈booleanfalse
autofocus是否⾃动聚焦，iOS 系统不⽀持该属性booleanfalse
show-word-limit v2.2.8是否显⽰字数统计，需要设置maxlength属性booleanfalse
error是否将输⼊内容标红booleanfalse
formatter v2.4.2输⼊内容格式化函数Function-
arrow-direction v2.0.4箭头⽅向，可选值为 left up downstringright
error-message底部错误提⽰⽂案，为空时不展⽰string''
label-class左侧⽂本额外类名any-
label-width左侧⽂本宽度，默认单位为pxnumber | string90px
label-align左侧⽂本对齐⽅式，可选值为 center rightstringleft
input-align输⼊框内容对齐⽅式，可选值为 center rightstringleft
error-message-align错误提⽰⽂案对齐⽅式，可选值为 center rightstringleft
autosize是否⾃适应内容⾼度，只对 textarea 有效，
可传⼊对象，如 { maxHeight: 100, minHeight: 50 }，
单位为pxboolean | objectfalse
left-icon左侧 图标名称 或图⽚链接string-
right-icon右侧 图标名称 或图⽚链接string-
Events
除下列事件外，Field 默认⽀持 Input 标签所有的原⽣事件input输⼊框内容变化时触发value: 输⼊框当前值focus输⼊框获得焦点时触发event: Event
blur输⼊框失去焦点时触发event: Event
clear点击清除按钮时触发event: Event
click点击时触发event: Event
click-left-icon点击左侧图标时触发event: Event
click-right-icon点击右侧图标时触发event: Event
⽅法
通过 ref 可以获取到 Field 实例并调⽤实例⽅法，详见 组件实例⽅法focus获取输⼊框焦点--
blur取消输⼊框焦点--
Slotslabel⾃定义输⼊框标签
input⾃定义输⼊框，使⽤此插槽后，与输⼊框相关的属性和事件将失效
left-icon⾃定义输⼊框头部图标
right-icon⾃定义输⼊框尾部图标
button⾃定义输⼊框尾部按钮

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。