介绍

表单中的输入框组件

引入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="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) {

// 过滤输入的数字

return value.replace(/\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自定义输入框尾部按钮