【记录】el-input textarea IE输入卡顿，并且需要指定最小行数和最大行数，自适应高度

1.解决IE输入卡顿问题（IE打中文会卡）

检查了下拉框，没有特别多数据，请求下拉框的接口删掉之后还是很卡。

参考了文章：Element输入框iput输入卡顿问题_element ui input 响应特别慢_泷星丶的博客-优快云博客

照文章说的用原生textarea之后确实不卡了，但是我还要指定最小行数和最大行数，这个如果用el-input的话直接用autosize属性就可以了，但是原生的没有。

<textarea class="el-textarea__inner" v-model.lazy="code" placeholder="code"></textarea>

2.文本域自适应高度，能设置最大行数和最小行数

我是通过自定义指令实现的。

创建一个js文件，写全局的自定义指令，然后在main.js里引用他。

文件路径@/utils/autoResize.js

import Vue from "vue";
// 原生textarea自适应高度指令 参数：minRows 最小行数 maxRows 最大行数 data 绑定的数据
const autoresize = Vue.directive("autoresize", {
  update: function(el, binding, vnode) {
    // 这个判断是为了以防多次触发，框疯狂的闪，找了很多地方都不知道哪里反复触发的，所以写了这个判断
    if (
      vnode.data.domProps.value != undefined &&
      vnode.data.domProps.value != null &&
      vnode.data.domProps.value != ""&&
      binding.oldValue.data!=binding.value.data
    ) {
      console.log('==',binding)
      let minRows = binding.value.minRows;
      let maxRows = binding.value.maxRows;
      if (el.scrollTop == 0) el.scrollTop = 1;
      while (el.scrollTop == 0) {
        if (el.rows > minRows) el.rows--;
        else break;
        el.scrollTop = 1;
        if (el.rows < maxRows) el.style.overflowY = "hidden";
        if (el.scrollTop > 0) {
          el.rows++;
          break;
        }
      }
      while (el.scrollTop > 0) {
        if (el.rows < maxRows) {
          el.rows++;
          if (el.scrollTop == 0) el.scrollTop = 1;
        } else {
          el.style.overflowY = "auto";
          break;
        }
      }
    }
  }
});

export { autoresize };

main.js中

import { autoresize } from '@/utils/autoResize.js'
...
Vue.use(autoresize)

使用：

<textarea 
                          v-autoresize="{ minRows: 2, maxRows: 10,data:dataAddForm.xxx}"
                          class="el-textarea__inner"
                          v-model.lazy="dataAddForm.xxx"
                          placeholder="请输入">
                 </textarea>

输入完旁边点一下就自己展开了