用户可以在文本框内输入或编辑文字。通常与表单组件搭配使用。
<z-field v-model="value" label="文本" placeholder="请输入内容"></z-field>
data() {
return {
value: ""
}
}
可通过type
参数指定输入框类型
<!-- 输入任意文本 -->
<z-field v-model="text" label="文本" />
<!-- 输入手机号,调起手机号键盘 -->
<z-field v-model="tel" type="tel" label="手机号" />
<!-- 允许输入正整数,调起纯数字键盘 -->
<z-field v-model="digit" type="digit" label="整数" />
<!-- 允许输入数字,调起带符号的纯数字键盘 -->
<z-field v-model="number" type="number" label="数字" />
<!-- 输入密码 -->
<z-field v-model="password" type="password" label="密码" />
data() {
return {
tel: '',
text: '',
digit: '',
number: '',
password: '',
}
}
通过readonly
参数控制输入框只读,disabled
控制输入框禁用。
<z-field label="文本" value="输入框只读" readonly />
<z-field label="文本" value="输入框已禁用" disabled />
通过left-icon
,right-icon
在输入框的左右侧显示图标,通过clearable
显示输入框尾部的清除图标。
<z-field v-model="value1" label="文本" left-icon="happy" right-icon="warning" placeholder="显示图标" />
<z-field v-model="value2" clearable label="文本" left-icon="happy" placeholder="显示清除图标" />
data() {
return {
value1: '',
value2: '123',
}
}
设置 required
属性表示这是一个必填项,可以配合 error
或 error-message
属性显示对应的错误提示。
<z-field v-model="username" error required label="用户名" placeholder="请输入用户名" />
<z-field v-model="phone" required label="手机号" placeholder="请输入手机号" error-message="手机号格式错误" />
data() {
return {
username: "",
phone: '123',
}
}
通过button
插槽可在输入框尾部插入按钮。
<z-field v-model="sms" center clearable label="短信验证码" placeholder="请输入短信验证码">
<template #button>
<z-button size="small" type="primary">发送验证码</z-button>
</template>
</z-field>
data() {
return {
sms: ""
}
}
通过 formatter
属性可以对输入的内容进行格式化,通过 format-trigger
属性可以指定执行格式化的时机,默认在输入时进行格式化。
<z-field v-model="value1" label="文本" :formatter="formatter" placeholder="在输入时执行格式化" />
<z-field v-model="value2" label="文本" :formatter="formatter" format-trigger="onBlur" placeholder="在失焦时执行格式化" />
data() {
return {
value1: "",
value2: ""
}
}
在使用textarea
文本域时,可通过autosize
自适应高度。
<z-field v-model="message" rows="1" autosize label="留言" type="textarea" placeholder="请输入留言" />
data() {
return {
message: ""
}
}
通过设置 maxlength
和 show-word-limit
属性后会在底部显示字数统计。
<z-field v-model="message" rows="2" autosize label="留言" type="textarea" :maxlength="50" placeholder="请输入留言" show-word-limit />
data() {
return {
message: ""
}
}
通过 input-align
属性可以设置输入框内容的对齐方式,可选值为 center
、right
。
<z-field v-model="value" label="文本" placeholder="输入框内容右对齐" input-align="right" />
data() {
return {
value: ""
}
}
参数 | 说明 | 类型 | 可选值 | 默认值 |
---|---|---|---|---|
value | 当前输入的值 | string|number | - | |
name | 表单内使用时的标识 | string | - | |
size | 单元格的尺寸大小 | string | large |
- |
label | 输入框左侧文本 | string | - | |
error | 是否将输入框内容标红 | boolean | false |
|
center | 是否使内容垂直居中 | boolean | false |
|
is-link | 是否展示右侧箭头并开启点击反馈 | boolean | false |
|
left-icon | 左侧图标名称或图片链接 | string | - | |
right-icon | 右侧图标名称或图片链接 | string | - | |
autosize | 当设置 textarea 后,是否自适应高度 | boolean | false |
|
required | 是否显示表单必填星号 | boolean | false |
|
clickable | 是否开启点击反馈 | boolean | false |
|
input-align | 输入框对齐方式 | string | center right |
- |
custom-style | 自定义样式 | object | {} |
|
error-message | 底部错误提示文案,为空时不展示 | string | - | |
arrow-direction | 箭头方向 | string | left up down |
right |
show-word-limit | 是否显示字数统计 | boolean | false |
|
error-message-align | 错误提示文案对齐方式 | string | center right |
left |
readonly | 是否为只读状态,只读状态下无法输入内容 | boolean | false |
|
clearable | 是否启用清除图标,点击清除图标后会清空输入框 | boolean | false |
|
clear-trigger | 显示清除图标的时机,always 表示输入框不为空时展示,focus 表示输入框聚焦且不为空时展示 | string | always |
focus |
border | 是否显示内边框 | boolean | true |
|
title-width | 左侧文本宽度,须包含单位 | string | 6.2em |
|
clear-icon | 清除图标名称或图片链接 | string | off_close |
|
placeholder | 输入框占位提示文字 | string | - | |
placeholder-style | 指定 placeholder 的样式 | string | - | |
placeholder-class | 指定 placeholder 的样式类,注意页面或组件的 style 中写了 scoped 时,需要在类名前写/deep/。部分小程序不支持。 | string | input-placeholder |
|
disabled | 是否禁用输入框 | boolean | false |
|
maxlength | 输入的最大字符数,设置为-1 时不限制最大长度 | number | -1 |
|
cursor-spacing | 输入框聚焦时底部与键盘的距离,h5 及部分小程序不支持。 | number | 50 |
|
auto-focus | 是否自动聚焦 | boolean | false |
|
focus | 获取焦点 | boolean | false |
|
cursor | 指定 focus 时的光标位置 | number | -1 |
|
selection-start | 光标起始位置,自动聚集时有效,需与 selection-end 搭配使用 | number | -1 |
|
selection-end | 光标结束位置,自动聚集时有效,需与 selection-start 搭配使用 | number | -1 |
|
adjust-position | 键盘弹起时,是否自动上推页面 | boolean | true |
|
hold-keyboard微信小程序 |
focus 时,点击页面的时候不收起键盘 | boolean | false |
|
type | input 的类型 | string | text |
|
password | 是否是密码类型 | boolean | false |
|
confirm-type | 设置键盘右下角按钮的文字,仅在 type="text" 时生效。 | string | done |
|
confirm-hold | 点击键盘右下角按钮时是否保持键盘不收起。 | boolean | false |
|
fixed | 如果 type 为 textarea 且在一个 position:fixed 的区域,需要显示指定属性 fixed 为 true。 | boolean | false |
|
show-confirm-bar | 是否显示键盘上方带有”完成“按钮那一栏,只对 textarea 有效 | boolean | true |
|
disable-default-padding | 是否去掉 iOS 下的默认内边距,只对 textarea 有效 | boolean | true |
|
formatter | 输入内容格式化函数 | func | null |
|
format-trigger | 格式化函数触发的时机 | string | onBlur |
onChange |
rules | 表单校验规则 | array | [] |
|
use-label-slot | 是否使用 title slot | boolean | false |
事件名 | 回调参数 | 说明 |
---|---|---|
focus | event object - event |
输入框聚焦事件 |
blur | event object - event |
输入框失焦事件 |
click | event object - event |
点击事件 |
click-icon | event object - event |
点击左侧图标事件 |
click-input | event object - event |
输入框点击事件 |
clear | event object - event |
点击清空控件事件 |
confirm | event object - event |
点击完成按钮事件 |
linechange | event object - event |
textarea 行数变化事件 |
keyboardheightchange | event object - event |
键盘高度发生变化事件 |
input | event object - event |
输入内容事件 |
change | event object - event |
内容改变事件 |
名称 | 说明 | Bindings |
---|---|---|
left-icon | 自定义输入框头部图标 | |
label | 自定义输入框左侧文本 | |
input | 自定义输入框,使用此插槽后,与输入框相关的属性和事件将失效 | |
right-icon | 自定义输入框尾部图标 | |
button | 自定义输入框尾部按钮 |