在 uni-app 开发中，很多同学会遇到
<uni-textarea> 组件的坑：明明数据有值、v-model 绑定正确，但输入框就是不回显内容；甚至部分场景下 v-model 完全失效，只能输入却无法双向绑定。
试过重置样式、延迟渲染、更新 uni-ui 版本都没用？别折腾了！直接改用 uni-app 原生 <textarea> 组件，兼容性拉满，绑定和样式都能完全自定义。
问题复现
使用 <uni-textarea> 时，明明 value 有值、页面能打印出绑定的变量，但输入框内就是空白
<!-- 失效的 uni-textarea 写法 -->
<uni-textarea v-model="content" placeholder="需求说明"></uni-textarea>
<text>数据存在：{{ content }}</text> <!-- 能打印，但输入框无内容 -->
解决方案：改用原生 textarea
直接替换为 uni-app 原生 <textarea>，样式完全自定义，v-model 绑定 100% 生效：
<template>
<view class="textarea-container">
<!-- 原生 textarea 替代 uni-textarea -->
<textarea v-model="content" placeholder="请输入内容" class="native-textarea"
adjust-position="true" maxlength="-1"></textarea>
<!-- 验证数据绑定 -->
<text class="verify-text">当前值：{{ content }}</text>
</view>
</template>
<script>
export default {
data() {
return {
// 支持大文本、换行、特殊字符，绑定即回显
content: `需求文本`
};
}
};
</script>
<style scoped>
/* 容器：确保输入框有足够空间 */
.textarea-container {
padding: 20rpx;
box-sizing: border-box;
}
/* 原生 textarea 样式自定义 */
.native-textarea {
width: 70%;
height: 118rpx !important;
font-size: 20rpx;
border-radius: 8rpx;
resize: none;
box-sizing: border-box;
white-space: pre-wrap;
pointer-events: auto;
user-select: text;
position: relative;
z-index: 1;
}
/* 验证文本样式（可选） */
.verify-text {
display: block;
margin-top: 20rpx;
font-size: 24rpx;
color: #666;
}
</style>
核心优势
- 绑定 100% 生效：原生
<textarea>完全兼容 uni-app 的 v-model 双向绑定，数据一改输入框立刻回显； - 样式完全可控：摆脱
uni-textarea内置样式的束缚，宽高、行高、边框等想怎么改就怎么改； - 多端适配：兼容微信小程序、H5、App 等所有 uni-app 支持的端，无兼容性问题；
- 支持特殊格式：
white-space: pre-wrap保留文本原有换行，大文本、特殊字符都能正常显示。
补充说明
1. 为什么 uni-textarea 会失效？
- uni-ui 封装的
<uni-textarea>底层用了绝对定位、多层嵌套，容易导致样式覆盖或渲染延迟； - 部分版本的 uni-ui 存在 v-model 语法糖兼容问题，即使数据绑定成功也无法渲染。
2. 原生 textarea 核心属性说明（解决赋值后无法编辑）
| 属性 | 作用 |
|---|---|
adjust-position | 仅小程序端生效，软键盘弹出时自动调整输入框位置，修复赋值后聚焦失效、无法编辑的问题； |
maxlength="-1" | 解除小程序端默认 140 字长度限制，避免赋值内容超限时触发绑定校验异常，导致无法编辑； |
pointer-events: auto | 确保输入框可点击，避免全局样式污染导致的 “假不可编辑”； |
user-select: text | 允许文本选择，避免全局样式禁止选中文本导致的无法编辑； |
3. 原生 textarea 进阶用法
（1）自定义 placeholder 样式
/* 自定义 placeholder 颜色 */
.native-textarea::placeholder {
color: #999;
font-size: 26rpx;
}
（2）限制输入长度
<textarea
v-model="content"
placeholder="需求说明"
class="native-textarea"
maxlength="2000" <!-- 限制最大输入长度，替换 -1 即可 -->
></textarea>
（3）Vue2 动态新增属性赋值（避免响应式丢失）
若绑定变量是对象属性（如 obj.content），新增属性时需用 Vue.set：
import Vue from 'vue';
methods: {
setObjContent() {
// 给对象动态新增属性，保留响应式
Vue.set(this.obj, 'content', '赋值内容');
}
}
总结
如果你的 <uni-textarea> 遇到 v-model 绑定失效、数据不回显、样式无法修改，或改用原生 <textarea> 后赋值无法编辑等问题，按本文方案：
- 替换为原生
<textarea>并添加adjust-position="true"和maxlength="-1"； - 确保绑定变量提前初始化、赋值为字符串类型；
- 避免覆盖响应式对象、禁用全局样式干扰。
无需纠结 uni-ui 组件的兼容问题，简单直接又稳定！
