低代码高性能原生UI框架Textarea 文本域
组件类型：UxTextareaComponentPublicInstance
扩展支持聚焦高亮、字数统计、自动增高、可清空
平台兼容性
| Android | iOS | web | 鸿蒙 Next | 小程序 |
|---|---|---|---|---|
| √ | √ | √ | x | x |
Props
| 属性名 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| theme | String | primary | 主题颜色 |
| name | String | - | 表单的控件名称，作为键值对的一部分与表单(form组件)一同提交 |
| value | String | - | 输入框的初始内容 |
| clearable | Boolean | false | 是否显示清除控件 |
| showWords | Boolean | false | 是否显示输入字数统计，只在 type ="text"或type ="textarea"时有效 |
| placeholder | String | - | 输入框为空时占位符 |
| placeholder-style | String | - | 指定 placeholder 的样式 |
| placeholder-class | String | - | 指定 placeholder 的样式类 |
| maxlength | Number | 140 | 最大输入长度，设置为 -1 的时候不限制最大长度 |
| height | Number | 80 | 高度 |
| auto-height | Boolean | false | 是否自动增高，设置auto-height时，style.height不生效 |
| auto-focus | Boolean | false | 自动获取焦点 |
| focus | Boolean | false | 获取焦点 |
| cursor | Number | 0 | 指定focus时的光标位置 |
| cursor-spacing | Number | 0 | 指定光标与键盘的距离，单位 px 。取 input 距离底部的距离和 cursor-spacing 指定的距离的最小值作为光标与键盘的距离 |
| confirm-hold | Boolean | false | 点击键盘右下角按钮时是否保持键盘不收起 |
| selection-start | Number | -1 | 光标起始位置，自动聚集时有效，需与selection-end搭配使用 |
| selection-end | Number | -1 | 光标结束位置，自动聚集时有效，需与selection-satrt搭配使用 |
| adjust-position | Boolean | true | 键盘弹起时，是否自动上推页面 |
| size | Number | $ux.Conf.fontSize | 输入框字体的大小 |
| color | String | $ux.Conf.fontColor | 输入框字体颜色 |
| darkColor | String | - | 深色 |
| background | String | transparent | 输入框背景颜色 |
| backgroundDark | String | - | 深色 |
| fixed | Boolean | false | 如果textarea是在一个position:fixed的区域，需要显示指定属性fixed为true |
| readonly | Boolean | false | 是否只读，与disabled不同之处在于disabled会置灰组件，而readonly则不会 |
| disabled | Boolean | false | 是否禁用 |
theme
| 值 | 说明 |
|---|---|
| primary | 主色 |
| warning | 警告 |
| success | 成功 |
| error | 错误 |
| info | 文本 |
darkColor
| 值 | 说明 |
|---|---|
| none | 不显示 |
| auto | 自动适配深色模式 |
| color | 其他颜色 |
Events
| 事件名 | 说明 | 参数 |
|---|---|---|
| clear | 点击清空时触发 | event: Function |
| input | 当键盘输入时，触发input事件，处理函数可以直接 return 一个字符串，将替换输入框的内容 | event: InputEvent |
| focus | 输入框聚焦时触发 | event: TextareaFocusEvent |
| blur | 输入框失去焦点时触发 | event: TextareaBlurEvent |
| confirm | 点击完成按钮时触发 | event: InputConfirmEvent |
| linechange | 输入框行数变化时触发 | event: TextareaLineChangeEvent |
| keyboardheightchange | 键盘高度发生变化的时候触发此事件 | event: InputKeyboardHeightChangeEvent |
示例代码
html
<template>
<ux-page>
<ux-navbar :title="title" :border="false"></ux-navbar>
<ux-scroll>
<ux-card direction="column" icon="flag" title="文本域" :bold="true">
<ux-text text="扩展支持聚焦高亮、字数统计、自动增高、可清空"></ux-text>
<ux-row :flex="true" align="top" :mt="5" style="width: 100%;">
<ux-text text="详细文档："></ux-text>
<ux-text style="flex: 1" name="文本域" text="https://www.uxframe.cn/component/form/textarea.html" mode="link"></ux-text>
</ux-row>
</ux-card>
<ux-card direction="column" icon="arrowright" title="主题" :bold="true">
<ux-text text="聚焦高亮，多种主题可配置，适配暗黑模式" :mb="15"></ux-text>
<ux-col>
<ux-textarea theme="success" v-model="value" :autoFocus="true" placeholder="请输入"></ux-textarea>
</ux-col>
</ux-card>
<ux-card direction="column" icon="arrowright" title="自动增高" :bold="true">
<ux-text text="支持自动增高，可配置最大高度" :mb="15"></ux-text>
<ux-col>
<ux-textarea v-model="value" :autoHeight="true" :maxHeight="60" placeholder="请输入" :mt="10"></ux-textarea>
</ux-col>
</ux-card>
<ux-card direction="column" icon="arrowright" title="统计字数" :bold="true">
<ux-text text="支持统计字数，可配置最大输入长度" :mb="15"></ux-text>
<ux-col>
<ux-textarea v-model="value" theme="error" :showWords="true" color="red" placeholder="请输入" :mt="10"></ux-textarea>
</ux-col>
</ux-card>
<ux-card direction="column" icon="arrowright" title="可清空" :bold="true">
<ux-text text="支持清空输入内容" :mb="15"></ux-text>
<ux-col>
<ux-textarea v-model="value" :clearable="true" placeholder="请输入" @input="onInput" :mt="10"></ux-textarea>
</ux-col>
</ux-card>
<ux-card direction="column" icon="arrowright" title="禁用/只读" :bold="true">
<ux-text text="支持禁用输入、只读状态" :mb="15"></ux-text>
<ux-col>
<ux-textarea v-model="value1" :disabled="true" value="禁用" :mb="10"></ux-textarea>
<ux-textarea v-model="value2" :readonly="true" value="只读"></ux-textarea>
</ux-col>
</ux-card>
<ux-placeholder :height="200">
<ux-row justify="center" align="center" style="height: 100%;">
<ux-text prefix-icon="wink" text="真的没有了~"></ux-text>
</ux-row>
</ux-placeholder>
</ux-scroll>
</ux-page>
</template><template>
<ux-page>
<ux-navbar :title="title" :border="false"></ux-navbar>
<ux-scroll>
<ux-card direction="column" icon="flag" title="文本域" :bold="true">
<ux-text text="扩展支持聚焦高亮、字数统计、自动增高、可清空"></ux-text>
<ux-row :flex="true" align="top" :mt="5" style="width: 100%;">
<ux-text text="详细文档："></ux-text>
<ux-text style="flex: 1" name="文本域" text="https://www.uxframe.cn/component/form/textarea.html" mode="link"></ux-text>
</ux-row>
</ux-card>
<ux-card direction="column" icon="arrowright" title="主题" :bold="true">
<ux-text text="聚焦高亮，多种主题可配置，适配暗黑模式" :mb="15"></ux-text>
<ux-col>
<ux-textarea theme="success" v-model="value" :autoFocus="true" placeholder="请输入"></ux-textarea>
</ux-col>
</ux-card>
<ux-card direction="column" icon="arrowright" title="自动增高" :bold="true">
<ux-text text="支持自动增高，可配置最大高度" :mb="15"></ux-text>
<ux-col>
<ux-textarea v-model="value" :autoHeight="true" :maxHeight="60" placeholder="请输入" :mt="10"></ux-textarea>
</ux-col>
</ux-card>
<ux-card direction="column" icon="arrowright" title="统计字数" :bold="true">
<ux-text text="支持统计字数，可配置最大输入长度" :mb="15"></ux-text>
<ux-col>
<ux-textarea v-model="value" theme="error" :showWords="true" color="red" placeholder="请输入" :mt="10"></ux-textarea>
</ux-col>
</ux-card>
<ux-card direction="column" icon="arrowright" title="可清空" :bold="true">
<ux-text text="支持清空输入内容" :mb="15"></ux-text>
<ux-col>
<ux-textarea v-model="value" :clearable="true" placeholder="请输入" @input="onInput" :mt="10"></ux-textarea>
</ux-col>
</ux-card>
<ux-card direction="column" icon="arrowright" title="禁用/只读" :bold="true">
<ux-text text="支持禁用输入、只读状态" :mb="15"></ux-text>
<ux-col>
<ux-textarea v-model="value1" :disabled="true" value="禁用" :mb="10"></ux-textarea>
<ux-textarea v-model="value2" :readonly="true" value="只读"></ux-textarea>
</ux-col>
</ux-card>
<ux-placeholder :height="200">
<ux-row justify="center" align="center" style="height: 100%;">
<ux-text prefix-icon="wink" text="真的没有了~"></ux-text>
</ux-row>
</ux-placeholder>
</ux-scroll>
</ux-page>
</template>ts
<script setup>
let title = ''
const value = ref('')
const value1 = ref('')
const value2 = ref('')
onLoad((e: OnLoadOptions) => {
title = e['title'] ?? ''
})
function onInput(v: string) {
value.value = v
}
</script><script setup>
let title = ''
const value = ref('')
const value1 = ref('')
const value2 = ref('')
onLoad((e: OnLoadOptions) => {
title = e['title'] ?? ''
})
function onInput(v: string) {
value.value = v
}
</script>css
<style lang="scss">
</style><style lang="scss">
</style>