Input 输入框

通过鼠标或键盘输入内容，支持多种类型和尺寸。

基础用法

使用 v-model 绑定数据，通过 type 属性切换输入框类型。

<template>
  <ZcInput v-model="input1" placeholder="请输入内容" />
  <ZcInput v-model="input2" type="password" placeholder="密码输入" />
  <ZcInput v-model="input3" type="textarea" placeholder="多行文本输入" :rows="4" />
</template>

可清空与密码切换

通过 clearable 属性可一键清空内容，showPassword 属性可切换密码显隐。

<template>
  <ZcInput v-model="input1" clearable placeholder="可清空的输入框" />
  <ZcInput v-model="input2" type="password" showPassword placeholder="密码显隐切换" />
</template>

尺寸与字数限制

通过 size 属性调整输入框尺寸，maxlength 和 showWordLimit 显示字数统计。

0/10

<template>
  <ZcInput v-model="input1" size="large" placeholder="大尺寸" />
  <ZcInput v-model="input2" size="medium" placeholder="中等尺寸" />
  <ZcInput v-model="input3" size="small" placeholder="小尺寸" />
  <ZcInput v-model="input4" maxlength="10" showWordLimit placeholder="最多10字符" />
</template>

禁用与只读

通过 disabled 和 readonly 属性控制输入交互。

<template>
  <ZcInput v-model="input1" disabled placeholder="禁用状态" />
  <ZcInput v-model="input2" readonly placeholder="只读状态" />
</template>

Input API

Props

参数	说明	类型	默认值
modelValue	绑定值	string | number	—
type	输入框类型	text | password | textarea | number | email | tel | url	text
size	输入框尺寸	large | medium | small	medium
placeholder	占位文本	string	—
disabled	是否禁用	boolean	false
readonly	是否只读	boolean	false
clearable	是否可清空	boolean	false
showPassword	是否可切换密码显隐	boolean	false
maxlength	最大输入长度	number	—
showWordLimit	是否显示字数统计	boolean	false
rows	文本域行数（textarea 类型）	number	3
resize	文本域缩放策略	none | both | horizontal | vertical	vertical
autocomplete	原生 autocomplete 属性	string	off
name	原生 name 属性	string	—
id	原生 id 属性	string	—

Events

事件名	说明	回调参数
update:modelValue	输入值更新时触发	(value: string | number)
input	输入时触发	(value: string)
change	值变更时触发	(value: string)
focus	获取焦点时触发	(event: FocusEvent)
blur	失去焦点时触发	(event: FocusEvent)
clear	点击清空按钮时触发	()

Slots

插槽名	说明
prepend	输入框前置内容
append	输入框后置内容
prefix	输入框头部图标
suffix	输入框尾部图标或内容