Textarea 文本域

用于多行文本输入。

引入

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

代码演示

基础用法

通过 v-model 绑定文本域的值。

<zq-textarea v-model="value" placeholder="请输入内容" />

const value = ref('')

带标签

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

<zq-textarea v-model="value" label="留言" placeholder="请输入留言内容" />

字数限制

通过 maxlength 属性设置最大字数，配合 show-word-limit 显示字数统计。

<zq-textarea v-model="value" :maxlength="100" show-word-limit placeholder="最多100字" />

自适应高度

通过 auto-height 属性设置文本域自适应内容高度。

<zq-textarea v-model="value" auto-height placeholder="自适应高度" />

自定义高度

通过 height 属性设置文本域高度，单位为 rpx。

<zq-textarea v-model="value" :height="300" placeholder="自定义高度" />

禁用状态

<zq-textarea v-model="value" disabled placeholder="禁用状态" />

必填标记

<zq-textarea v-model="value" label="备注" required placeholder="必填" />

错误状态

<zq-textarea v-model="value" label="内容" error error-message="内容不能为空" />

API

Props

参数	说明	类型	默认值
v-model	文本域的值	string	''
label	左侧标签文字	string	''
placeholder	占位提示文字	string	''
disabled	是否禁用	boolean	false
maxlength	最大输入长度，-1 为不限制	number	-1
border	是否显示下边框	boolean	true
required	是否显示必填星号	boolean	false
error	是否标记为错误状态	boolean	false
error-message	错误提示文字	string	''
auto-height	是否自适应内容高度	boolean	false
height	文本域高度，单位 rpx	number	200
show-word-limit	是否显示字数统计	boolean	false
focus	是否自动聚焦	boolean	false

Events

事件名	说明	回调参数
update:modelValue	内容变化时触发	value: string
input	输入时触发	value: string
focus	聚焦时触发	event: Event
blur	失焦时触发	event: Event

Slots

名称	说明
label	自定义左侧标签

主题定制

变量名	说明
--color-bg-card	文本域背景色
--color-bg-input	输入区域背景色
--color-divider	下边框颜色
--color-text-primary	输入文字颜色
--color-text-placeholder	占位文字/字数统计颜色
--color-error	错误状态颜色