Textarea 文本域

17:06

说明

多行文本输入框，border 默认 'surround'（四周），也可设为 'bottom'（仅底边框）/ 'none'。内置字数统计（count）、自动增高（auto-height）、清空按钮与禁用 / 只读态；放在 ux-form-item 内时会继承表单项 size，并在输入 / 失焦时自动触发表单校验。

兼容性

平台	支持情况
App	✅ 支持
H5	✅ 支持
微信小程序	✅ 支持

示例

基础用法

v-model 绑定内容，border=surround 四周边框。

查看源码

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

<script setup lang="uts">
const value = ref<string>('');
</script>

字数统计

count=true 显示字数统计，maxlength 限制最大长度。

查看源码

<template>
    <ux-textarea v-model="value" count :maxlength="100" placeholder="请输入内容" />
</template>

<script setup lang="uts">
const value = ref<string>('');
</script>

自动高度

auto-height=true 根据内容自动调整高度。

查看源码

<template>
    <ux-textarea v-model="value" auto-height count placeholder="请输入内容" />
</template>

<script setup lang="uts">
const value = ref<string>('');
</script>

禁用状态

disabled=true 禁用输入，显示灰色背景。

查看源码

<template>
    <ux-textarea v-model="value" disabled />
</template>

<script setup lang="uts">
const value = ref<string>('禁用的内容');
</script>

底部边框

border=bottom 仅显示底部边框。

查看源码

<template>
    <ux-textarea v-model="value" border="bottom" placeholder="请输入内容" />
</template>

<script setup lang="uts">
const value = ref<string>('');
</script>

不同尺寸

size 支持 small/default/large 预设值。

查看源码

<template>
    <view>
        <ux-textarea v-model="value1" size="small" placeholder="小尺寸文本域" />
        <view class="gap" />
        <ux-textarea v-model="value2" size="large" placeholder="大尺寸文本域" />
    </view>
</template>

<script setup lang="uts">
const value1 = ref<string>('');
const value2 = ref<string>('');
</script>

<style scoped>
.gap {
    height: 10px;
}
</style>

API

Props

属性	说明	类型	默认值	版本
customStyle		UTSJSONObject	-	-
customClass		string	''	-
modelValue		string | number	''	-
placeholder	占位文字（默认''）	string | number	''	-
placeholderClass		string	'input-placeholder'	-
placeholderStyle		string	''	-
height	高度，单位px（默认''，走 size 预设）	string | number	''	-
confirmType		string	'done'	-
disabled	是否禁用（默认false）	boolean	false	-
readonly	是否只读（默认false）	boolean	false	-
count	是否显示字数统计（默认false）	boolean	false	-
focus		boolean	false	-
autoHeight		boolean	false	-
fixed		boolean	false	-
cursorSpacing		number	0	-
cursor		string | number	''	-
showConfirmBar		boolean	true	-
selectionStart		number	-1	-
selectionEnd		number	-1	-
adjustPosition		boolean	true	-
disableDefaultPadding		boolean	false	-
holdKeyboard		boolean	false	-
confirmHold		boolean	false	-
maxlength	最大可输入长度（默认140）	string | number	140	-
border	边框形态(默认'surround')：'surround'四周边框，'bottom'仅底边框，'none'无边框；true/false 为便捷别名(等价 'surround'/'none')	boolean | BorderType	'surround'	-
ignoreCompositionEvent		boolean	true	-
size		SizeType | string | number	''	-
clearable		boolean	true	-
validateState		boolean	false	-

Events

事件名	说明	回调参数	版本
focus	获得焦点时触发	value: string	-
blur	失去焦点时触发	value: string	-
linechange		e: UniTextareaLineChangeEvent	-
input	输入内容变化时触发	value: string	-
confirm	点击键盘完成时触发	value: string	-
keyboardheightchange		e: UniTextareaKeyboardHeightChangeEvent	-
change	输入内容变化时触发	value: string	-
click	点击时触发	-	-

Slots

ux-textarea 无插槽。

注意事项

1. 默认 border 为 'surround'（四周），与 ux-input 默认 'none' 相反；也可传 'bottom' / 'none'，或 true/false 别名。
2. count 显示字数统计，maxlength 默认 140；统计文本固定在右下角。
3. auto-height 为 true 时按内容增高（min-height），否则固定高度；高度缺省走 size 预设。
4. clearable 默认 true，清空图标在聚焦、值非空且未禁用时出现，失焦后延迟约 100ms 隐藏。
5. readonly 样式不变、可点击并触发 click；组件用透明遮罩捕获点击（原生 textarea 设 disabled 会阻止点击冒泡）。
6. show-confirm-bar / hold-keyboard / disable-default-padding / fixed 为原生 textarea 属性，主要面向微信小程序，其他端可能不生效。
7. 放在 ux-form-item 内时，size 缺省继承表单项，validate-state 与表单项校验态取「或」。