Field 输入框

介绍

用户可以在文本框内输入或编辑文字。通常与表单组件搭配使用。

基础用法

<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 属性表示这是一个必填项,可以配合 errorerror-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: ""
	}
}

显示字数统计

通过设置 maxlengthshow-word-limit 属性后会在底部显示字数统计。

<z-field v-model="message" rows="2" autosize label="留言" type="textarea" :maxlength="50" placeholder="请输入留言" show-word-limit />
data() {
	return {
		message: ""
	}
}

输入框内容对齐

通过 input-align 属性可以设置输入框内容的对齐方式,可选值为 centerright

<z-field v-model="value" label="文本" placeholder="输入框内容右对齐" input-align="right" />
data() {
	return {
		value: ""
	}
}

API

Props

参数 说明 类型 可选值 默认值
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

Events

事件名 回调参数 说明
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 内容改变事件

Slots

名称 说明 Bindings
left-icon 自定义输入框头部图标
label 自定义输入框左侧文本
input 自定义输入框,使用此插槽后,与输入框相关的属性和事件将失效
right-icon 自定义输入框尾部图标
button 自定义输入框尾部按钮