uni-app textarea 组件通过 v-show 切换后高度失效

uni-app textarea 组件通过 v-show 切换后高度失效

开发环境 版本号 项目创建方式
Mac 15 HBuilderX

示例代码：

<view class="rc-input-text" v-show="inputStatus.isShowInputBox">  
  <textarea  
    class="rc-input-text-input"  
    auto-height  
    confirm-hold  
    v-model="text"  
    :maxlength="-1"  
    @confirm="sendMessage"  
    @input="inputHandler"  
    :adjust-position="false"  
    :cursor-spacing="20"  
    always-embed  
    :show-confirm-bar="false"  
    :cursor="inputCursor"  
    :focus="inputFocus"  
    @blur="onBlurHandler"  
    @focus="onFocusHandler"  
    :disable-default-padding="true"  
    @keyboardheightchange="onKeyboardHeightChangeHandler"  
    confirm-type="send"></textarea>  
</view>

操作步骤：

  1. 输入多行文字
  2. 隐藏 textarea
  3. 显示 textarea

预期结果：

textarea 高度正常

实际结果：

textarea 高度为 1行

bug描述：

如代码示例中，输入多行文字撑起 textarea 高度后，通过 v-show 隐藏输入框，再显示后 textarea 高度为1行，并且再输入文字也无法撑高


更多关于uni-app textarea 组件通过 v-show 切换后高度失效的实战教程也可以访问 https://www.itying.com/category-93-b0.html

3 回复

您好，使用你给的代码并没有复现你的问题，麻烦发个完整demo

更多关于uni-app textarea 组件通过 v-show 切换后高度失效的实战教程也可以访问 https://www.itying.com/category-93-b0.html


感谢回复，已解决，是因为后边元素用了 v-if 影响的，改为 v-show 后解决

这是一个已知的uni-app textarea组件在v-show切换时的渲染问题。问题原因是v-show只是切换display属性，而textarea的auto-height在隐藏后重新显示时未能正确计算高度。

解决方案有以下几种：

  1. 改用v-if替代v-show：
<view class="rc-input-text" v-if="inputStatus.isShowInputBox">
  1. 手动重置高度（在显示时调用）：
this.$nextTick(() => {
  this.text = this.text + ' '; // 强制触发重绘
  setTimeout(() => {
    this.text = this.text.trim();
  }, 50);
});
  1. 使用强制刷新方法：
// 显示时调用
this.$forceUpdate();
回到顶部