Skip to content
在新窗口打开实时预览

Textarea 文本域 ​

用于多行文本输入,支持固定或自适应高度、字数统计和 Form 校验联动。

平台兼容性 ​

H5App微信小程序支付宝小程序
√√√√

基础用法 ​

vue
<snake-textarea v-model="intro" :maxlength="200" count :height="180" />

中文、日文等输入法处于候选组合阶段时,组件只更新内部显示;组合结束后才同步 v-model 并触发表单 change 校验,避免半成品拼音造成误校验。

API ​

Props ​

参数说明类型默认值
modelValue / placeholder / maxlength值、占位和最大长度string | number'' / 请输入内容 / 140
height / autoHeight / fixed高度、自适应和固定区域UnitValue | boolean120 / false
count显示字数统计booleanfalse
disabled / readonly禁用和只读booleanfalse
border / size / fontSize边框、尺寸和字号string | UnitValuesurround
focus / cursor / selectionStart / selectionEnd焦点和光标boolean | number原生默认值
confirmType / confirmHold / showConfirmBar键盘确认栏string | booleanreturn / false / true
adjustPosition / holdKeyboard / cursorSpacing键盘行为boolean | number原生默认值
customClass / customStyle自定义类名和样式string | style''

Events ​

事件名说明参数
update:modelValue / input / change值更新、输入和失焦确认value
focus / blur / linechange焦点和行数变化原生事件
confirm键盘确认(value, event)
keyboardheightchange键盘高度变化原生事件

主题变量 ​

变量名说明
--snake-color-text输入文字颜色
--snake-color-text-light占位文字颜色
--snake-color-text-muted字数统计颜色
--snake-color-divider默认边框颜色
--snake-color-primary聚焦边框颜色
--snake-color-error校验失败边框颜色
--snake-color-disabled-bg禁用状态背景色
--snake-radius-md容器圆角

为 uni-app 商城与 CMS 场景设计