uni-app vue3 nvue textarea 设置了 auto-height 高度不会自适应直接显示textarea的默认高度

uni-app vue3 nvue textarea 设置了 auto-height 高度不会自适应直接显示textarea的默认高度

开发环境 版本号 项目创建方式
Windows Windows11 HBuilderX

产品分类：
uniapp/App

PC开发环境操作系统：
Windows

HBuilderX类型：
正式

HBuilderX版本号：
4.85

手机系统：
Android

手机系统版本号：
Android 15

手机厂商：
vivo

手机机型：
vivo iqoo12

页面类型：
nvue

vue版本：
vue3

打包方式：
云端

示例代码：

<textarea auto-height />

操作步骤：

<textarea auto-height />

预期结果：
高度自适应，只显示一行，类似input输入框

实际结果：
高度不自适应，直接显示textarea的默认高度，默认高度估计有150px

bug描述：
vue3 nvue textarea 设置了 auto-height，高度不会自适应，直接显示textarea的默认高度


更多关于uni-app vue3 nvue textarea 设置了 auto-height 高度不会自适应直接显示textarea的默认高度的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

vue2 模式下运行是正常的

更多关于uni-app vue3 nvue textarea 设置了 auto-height 高度不会自适应直接显示textarea的默认高度的实战教程也可以访问 https://www.itying.com/category-93-b0.html


在 uni-app 的 nvue 页面中，auto-height 属性在 Vue3 环境下确实存在兼容性问题。这是由于 nvue 的渲染机制与 Vue3 的响应式系统尚未完全适配导致的。

解决方案：

  1. 使用 :style 动态绑定高度，结合 @input 事件计算内容高度
<textarea 
  :style="{height: textareaHeight + 'px'}" 
  @input="onInput"
  v-model="text"
/>

const textareaHeight = ref(40) // 初始高度
const onInput = (e) => {
  // 根据行数计算新高度，每行约20px
  const lines = e.detail.value.split('\n').length
  textareaHeight.value = Math.max(40, lines * 20)
}
  1. 使用条件编译针对不同平台处理
<!-- #ifdef APP-NVUE -->
<textarea :style="{height: dynamicHeight}" />
<!-- #endif -->
<!-- #ifndef APP-NVUE -->
<textarea auto-height />
<!-- #endif -->
回到顶部