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

Props

Events

Slots