element性能优化之实时计算textarea高度

最新推荐文章于 2024-05-21 15:04:44 发布

小菜101

最新推荐文章于 2024-05-21 15:04:44 发布

阅读量2.2k

点赞数

分类专栏：前端文章标签： javascript vue.js 前端 element javascript性能优化

本文链接：https://blog.csdn.net/github_36091081/article/details/128114800

版权

element性能优化之实时计算textarea高度

el-input中有个属性autosize加上后，textarea的高度会随着内容高度被撑开，而不是默认的那样会出现滚动条：

    <el-input
        type="textarea"
        autosize
        placeholder="请输入内容"
        v-model="textarea">
    </el-input>

不加 autosize时，内容撑了会出现滚动条

在这里插入图片描述

加了 autosize时，高度会随着内容撑开

在这里插入图片描述

原理

监听了 textarea的val的变化，通过实时创建一个内容跟原来textarea一样，但是隐藏的textarea元素，计算出该隐藏的textarea的高度，然后赋值给真正的textarea，这样就做了性能优化，减少了页面的重绘

核心代码如下：我加了一些自己的注解

export default function calcTextareaHeight(
  targetElement,
  minRows = 1,
  maxRows = null
) {
   
  debugger
  if (!hiddenTextarea) {
    
    hiddenTextarea = document.createElement('textarea'); // 创建一个隐藏的textarea元素
    document.body.appendChild(hiddenTextarea)