UniApp 组件 · 实验

UGTextarea 文本域

支持错误和帮助说明的多行文本输入框。

组件预览

以下画面来自同一组件源码的 H5 构建，用于检查内容、状态和主题；MP-WEIXIN 最终外观仍以开发者工具和真机为准。

使用方式

配置 easycom 后直接使用 <ug-textarea>，无需在页面脚本中导入组件。

vue

<script setup lang="ts">
import { ref } from 'vue'
const description = ref('')
</script>
<template>
  <ug-textarea v-model="description" label="补充说明" placeholder="输入多行内容" :maxlength="300" />
</template>

easycom 公开入口：@ug666/ui-uniapp/components/ug-textarea/ug-textarea.vue

属性

属性	类型	默认值	说明
modelValue	string \| number	''	通过 v-model 管理的内容；写回时为字符串。
label	string	—	输入区域标签。
helperText	string	—	未出错时的辅助说明。
error	string	—	错误说明并切换错误视觉。
placeholder	string	—	原生占位文字。
disabled	boolean	Provider	禁用原生输入。
readonly	boolean	false	保持当前值并禁止编辑。
maxlength	number	140	最大输入长度，-1 表示不限制。
autoHeight	boolean	false	跟随内容自动增高。
fixed	boolean	false	位于 fixed 区域时透传给原生 textarea。
cursorSpacing	number	0	光标与键盘的距离，单位 px。
confirmType	'send' \| 'search' \| 'next' \| 'go' \| 'done'	'done'	键盘确认按钮类型。
confirmHold	boolean	false	确认时是否保持键盘。
showConfirmBar	boolean	true	是否显示键盘确认栏。
adjustPosition	boolean	true	键盘弹起时是否自动上推页面。
minHeight	string \| number	'176rpx'	非自动高度下的最小高度；数字按 rpx 处理。
size	'sm' \| 'md' \| 'lg'	Provider	文字与内边距尺寸。

事件

事件	参数	说明
update:modelValue	value: string	输入后更新 v-model。
input	value: string	输入内容变化时触发。
confirm	value: string	点击键盘确认时触发。
focus	event	获得焦点时触发。
blur	event	失去焦点时触发。
linechange	event	原生行数变化时触发。

注意事项

textarea 在微信小程序属于原生组件，层级和 fixed 场景必须在目标页面实测。
业务校验、字数统计和持久化留在业务层。

平台边界

总览中的画面来自同一组件源码的 H5 构建，只用于辅助浏览；小程序真实外观仍以 Demo 在微信开发者工具和真机中的结果为准。

MP-WEIXIN 已编译开发者工具与真机待验证