首页uniapp textarea自适应高度

uniapp textarea自适应高度

时间: 2025-02-13 08:12:24 浏览: 68

### 实现 UniApp 中 Textarea 组件自适应高度在 UniApp 中，为了使 `textarea` 高度能够根据输入的内容动态调整，可以通过监听输入事件并实时计算文本框所需的高度来实现这一效果。 #### 使用 CSS 和 JavaScript 动态调整 textarea 的高度通过结合 CSS 设置最小高度以及使用 JavaScript 来检测内容变化从而改变元素尺寸的方式是最常见的做法之一。下面是一个具体的例子： ```html <template> <view class="container">  <textarea v-model="content" @input="adjustHeight" placeholder="请输入..." auto-height style="min-height: 50px;" ></textarea> </view> </template> <script> export default { data() { return { content: '' } }, methods: { adjustHeight(event) { const textarea = event.target; // 移除之前设定的最大宽度限制以便重新测量自然高度 textarea.style.height = 'auto'; // 获取当前滚动条高度加上默认padding/margin等边距作为新的目标高度 textarea.style.height = `${textarea.scrollHeight}px`; } } } </script> <style scoped> /* 可选：为textarea添加一些基本样式 */ .container textarea { width: 100%; padding: 10px; box-sizing: border-box; resize: none; /* 禁止用户手动调整大小 */ } </style> ``` 此方法利用了 Vue.js 的双向绑定特性 (`v-model`) 将用户的输入同步到数据模型中，并且每当发生输入操作时触发 `@input` 事件处理器去更新文本区域的实际显示高度[^1]。值得注意的是，在某些情况下可能还需要考虑浏览器兼容性和特殊字符处理等问题；此外，如果希望进一步优化性能，则可以在必要时引入防抖动(debounce)机制以减少频繁调用布局重绘带来的开销。

阅读全文