el-input textarea autosize 的坑

Posted 2023-04-11

参考技术A 项目中给 el-input type=textarea 的输入框设置了 autosize根据输入框内容自适应高度。
当刚进入页面时，内容为多行时，在 Safari浏览器发现出现滚动条，行高为单行文本的高度。

当在其中输入内容或是刷新页面的时候才会自适应。

思考
会不会是和 autosize与数据接收的先后顺序有关 于是沙雕式的在结构上进行顺序颠倒，并没有什么卵用。（读到这儿请忍住别笑我这个沙雕处理。。。）
于是，开始看 methods 逻辑，因为这块项目逻辑比较复杂就不一个一个 PO 了，反正就是各种颠倒顺序，不行。。。
element UI源码中有个方法
resizeTextarea() 是挂在 拥有 autosize 的 input 上实现的自适应的

所以如下操作：
1、在对应 el-input 上添加 ref （如 enterInput）
2、在处理事务逻辑中执行

好使着的。告辞~

elmentUI组件怎么绑定原生事件

el-input为例：

    <el-input 
      id="user-input"
      type="textarea" 
      placeholder="请换行输入不同用户" 
      :autosize="{minRows: 2, maxRows: 10}" 
      v-model="users" 
      @input="changeInput"
      @focus="onFocus"
      @blur="hintItems=null"
      @click.native="onClick"
      @keyup.native="onKeyup1">
    </el-input>

如上面所示，原生事件绑定要在后面加.native