Field 输入框

用户可以在文本框内输入或编辑文字。

代码演示

基础用法

title 输入框左侧label文案，v-model 输入框内容，placeholder 输入框占位符。

<hd-field title="密码" v-model="value" placeholder="请输入密码"></hd-field>

const value = ref<string>('')

密码类型输入框

password 是否为密码类型，为true时暗文显示输入框内容。

<hd-field title="密码" v-model="value" :password="password"></hd-field>

const value = ref<string>('')

const password = ref<boolean>(true)

输入框清空

clearable 是否显示清除按钮，默认false。

<hd-field title="密码" v-model="value" :clearable="clearable"></hd-field>

const value = ref<string>('')

const clearable = ref<boolean>(true)

输入框禁用

disabled 输入框是否禁用，默认false。

<hd-field title="密码" v-model="value" :disabled="disabled"></hd-field>

const value = ref<string>('')

const disabled = ref<boolean>(true)

输入文字最大长度

maxlength 限制输入框最大输入字符数量。

<hd-field title="密码" v-model="value" :maxlength="maxlength"></hd-field>

const value = ref<string>('')

const maxlength = ref<number>(20)

Props

Name	Description	Type	Required	Default
title	输入框title	String	false	默认值是：title
modelValue	输入框的值	String	false	-
type	输入框类型，可选值为：text（文本输入键盘）、number（数字输入键盘）、idcard（身份证输入键盘）、digit（带小数点的数字键盘）、tel（电话输入键盘）	String	false	'text' / 'number' / 'idcard'/ 'digit'/ 'tel'
password	是否为密码类型	Boolean / String	false	默认值是：false
placeholder	占位符	String	false	-
clearable	是否显示清除按钮	Boolean / String	false	默认值是：false
disabled	是否为禁用	Boolean / String	false	默认值是：false
maxlength	输入文字最大长度	Number	false	默认值是：-1

Events

Event Name	Description	Parameters
update:modelValue	输入框内容发生变化时触发	value：输入框的内容，建议通过v-model双向绑定输入值，而不是监听此事件的形式
输入框变化	输入框内容发生变化时触发	value：输入框的内容，建议通过v-model双向绑定输入值，而不是监听此事件的形式
focus	聚焦时触发	e:FocusEvent
blur	失焦时触发	e:FocusEvent

Slots

Name	Description	Default Slot Content
default	自定义右侧内容	-