textarea的替代品div.contenteditable

标签定义多行文本属性控件，可容纳无限数量的文本，通过cols，rows属性设置textarea尺寸，当然也可以用css的width、height属性。
需求： textare作为文本输入固然好用，但是在实际项目中，通过平台识别出来的原文和译文内容，需要默认展示出所有的字幕内容，不能滑动，textare无法自适应文字的高度，用户使用非常不方便，每次都要去拖拽textare的高度。

第一波尝试：可编辑div（引发了其他问题，时间紧急直接放弃了）

刚开始采用了div.contenteditable可编辑的div，出现了数据双向绑定异常问题，以及无法获取鼠标点的位置，还影响其他的小功能，第一波尝试失败，为了不影响页面整体功能，减少改动范围，所以果断放弃此种方式；

第二波尝试: 获取焦点后，直接展开

通过获取当前元素的滑动距离（scrollHeight），将textare的height设置为srollHeight的高度，eg:
1、 给textarea列表元素都设置好id
<el-input type=“textarea” :id="‘newText’+index" v-model.trim=“item.text” @focus=“foldDown(index)” @blur=“foldUp(index)”>
2、获取焦点，展开textarea

foldDown(index){
   
    let id = 'newText'+index
    let areaDom = document.getElementById(id)
    if(!areaDom) return
    areaDom.style.height = areaDom.scrollHeight + 'px'
  }

3、失去焦点，设置固定高度

foldUp(index){
   
    let id ='newText'+index
    let areaDom = document.getElementById(id)
    areaDom.style.height = '100px'
  }

问题：但是这种方式还是不满足运营和CEO方面的需求，操作起来还是存在很多的问题，重点是没有实现全部展开功能，总之用户体验不友好。

第三波尝试: 进入页面初始化–默认全部展开

原文直接展示即可，所以直接用普通的div，可实现自适应展开所有文字；译文是textarea，需要每条计算滚动距离，然后重置textarea高度。
因为一个视频的字幕全部识别出来，可能会有几百条，所以前端采用的elementUI的懒加载方式。

<div class="roll roll-bar" ref="myRoll" v-infinite-scroll="lazyLoad">
    <div class="dsf">
         <ul class="translate-before" style="width: 50%;">
             <li v-for="item in list.slice(0,count)" :key="index">
                 <div v-html.trim="item.text"></div>
             </li>
         </ul>
         <ul class="translate-after" style="width: 50%;">
             <li v-for=