Input 输入框

用于在表单中输入文本信息。

引入

通过 easycom 自动引入，无需手动注册。

代码演示

基础用法

通过 v-model 绑定输入框的值，通过 placeholder 设置占位提示文字。

<zq-input v-model="value" placeholder="请输入" />

const value = ref('')

带标签

通过 label 属性设置左侧标签文字。

<zq-input v-model="value" label="用户名" placeholder="请输入用户名" />

可清除

通过 clearable 属性启用清除按钮，输入框有内容时显示清除图标。

<zq-input v-model="value" label="标题" placeholder="可清除" clearable />

密码输入

通过 password 属性设置为密码输入框。

<zq-input v-model="value" label="密码" placeholder="请输入密码" password />

禁用状态

通过 disabled 属性禁用输入框。

<zq-input v-model="value" label="标题" placeholder="禁用状态" disabled />

只读状态

通过 readonly 属性设置为只读。

<zq-input v-model="value" label="标题" readonly />

前缀/后缀图标

通过 prefix-icon 和 suffix-icon 属性设置输入框前后的图标。

<zq-input v-model="value" prefix-icon="search" placeholder="搜索" clearable />
<zq-input v-model="value" suffix-icon="eye" placeholder="后缀图标" />

前缀/后缀插槽

通过 prefix 和 suffix 插槽自定义输入框前后内容。

<zq-input v-model="value" placeholder="请输入">
  <template #prefix>
    <text>https://</text>
  </template>
  <template #suffix>
    <text>.com</text>
  </template>
</zq-input>

必填标记

通过 required 属性在标签前显示必填星号。

<zq-input v-model="value" label="姓名" placeholder="必填" required />

错误状态

通过 error 属性标记错误状态，通过 error-message 显示错误提示。

<zq-input v-model="value" label="手机号" error error-message="请输入正确的手机号" />

输入对齐

通过 input-align 属性设置输入内容的对齐方式。

<zq-input v-model="value" label="标题" input-align="center" placeholder="居中" />
<zq-input v-model="value" label="标题" input-align="right" placeholder="右对齐" />

标签宽度

通过 label-width 属性设置标签宽度。

<zq-input v-model="value" label="长标签文字" label-width="240rpx" placeholder="请输入" />

自定义标签

通过 label 插槽自定义标签内容。

<zq-input v-model="value" placeholder="请输入">
  <template #label>
    <zq-icon name="user" :size="16" />
    <text style="margin-left: 8rpx;">用户</text>
  </template>
</zq-input>

API

Props

参数	说明	类型	默认值
v-model	输入框的值	string | number	''
type	输入框类型	string	'text'
label	左侧标签文字	string	''
placeholder	占位提示文字	string	''
disabled	是否禁用	boolean	false
readonly	是否只读	boolean	false
clearable	是否启用清除按钮	boolean	false
maxlength	最大输入长度，-1 为不限制	number	-1
prefix-icon	前缀图标名称	string	''
suffix-icon	后缀图标名称	string	''
border	是否显示下边框	boolean	true
required	是否显示必填星号	boolean	false
error	是否标记为错误状态	boolean	false
error-message	错误提示文字	string	''
input-align	输入内容对齐方式	'left' | 'center' | 'right'	'left'
label-width	标签宽度	string	'180rpx'
focus	是否自动聚焦	boolean	false
password	是否为密码类型	boolean	false
confirm-type	键盘右下角按钮类型	string	'done'

Events

事件名	说明	回调参数
update:modelValue	输入框内容变化时触发	value: string
input	输入时触发	value: string
focus	聚焦时触发	event: Event
blur	失焦时触发	event: Event
clear	点击清除按钮时触发	-
confirm	点击键盘确认按钮时触发	event: Event

Slots

名称	说明
label	自定义左侧标签
prefix	自定义输入框前缀
suffix	自定义输入框后缀

主题定制

变量名	说明
--color-bg-card	输入框背景色
--color-divider	下边框颜色
--color-text-primary	输入文字颜色
--color-text-secondary	图标颜色
--color-text-placeholder	占位文字颜色
--color-error	错误状态颜色