实现textarea内容完全显示时禁止向下拉伸功能

项目使用 vue2 + element-ui进行开发
textarea通过 < el-input type=“textarea” …/> 实现

需求：

1. textarea右下角拖拽拉伸以查看更多文本内容。
2. 输入框支持在固定高度的基础上，上下拉动，增加显示的面积。
3. 最多拉伸到显示全部的文字内容为止后不可再拉伸，最少压缩到固定显示三行的位置后不可再压缩。

可行性分析：

1. 需求1、需求2通过给textarea设置resize属性为true即可实现( textarea默认resize：true )
2. 需求3的实现通过给textarea设置minHeight和maxHeight可以实现

解决：

根据内容动态设置textarea的maxHeight

(1) 先使用ResizeObserver监视 Element 内容盒或边框盒或者 SVGElement 边界尺寸的变化。

方法要在页面渲染完成后调用，所以要写在 mounted 里

	mounted() {
	    // dom为textarea的dom元素
	    const dom = this.$refs['oriFormControl'][0].$refs['formControl'].$refs['scrollInput'].$el
		
		// 调用new ResizeObserver()方法，监听dom元素尺寸的变化
	    this.observer = new ResizeObserver(this.originResize)
	    // 调用observe() 对指定 Element 进行监听
	    this.observer.observe(dom, { box: 'border-box' })
	    
	    // 监听浏览器页面缩放，动态调用originResize()方法
	    window.onresize = () => (() => {
	      this.originResize()
	    })()
	  },
	// 离开当前路有前结束对指定dom元素的监听
	beforeDestroy() {
    	this.observer.disconnect()
	},

(2) 在methods中定义originResiz()方法实现

methods: {
	originResize() {
      const dom= this.$refs['oriFormControl'][0].$refs['formControl'].$refs['scrollInput']
      // 先根据\n切割出textarea内容中换行的内容
      var arr = this.form.content.split('\n')
      // 声明一个变量
      var num = 0
      // 获取textarea的宽
      var textareaWidth = Number(dom.$el.clientWidth)
      // 获取textarea的字体
      var textareaFontFamily = dom.$el.style.fontFamily
      // 获取textarea的字体大小
      var textareaFontSize = dom.$el.style.fontSize || '14px'
      // eslint-disable-next-line no-extend-native
      // 在string原型链上添加allFontWidth方法，用来计算文字的长度
      String.prototype.allFontWidth = function(font) {
        // re-use canvas object for better performance
        var canvas = String.prototype.allFontWidth .canvas || (String.prototype.allFontWidth .canvas = document.createElement('canvas'))
        var context = canvas.getContext('2d')
        font && (context.font = font)
        var metrics = context.measureText(this)
        return metrics.width
      }
      /*
       * 当文字的长度大于文本框的宽度是，计算所占的行数
       */
      for (var i = 0; i < arr.length; i++) {
        if (arr[i].allFontWidth (textareaFontSize + ' ' + textareaFontFamily + ' ' + 'normal') > textareaWidth) {
          var num1 = parseInt(arr[i].allFontWidth (textareaFontSize + ' ' + textareaFontFamily + ' ' + 'normal') / textareaWidth)
          num = num + num1
        }
      }
      // nLine 就是获取到的textarea的行数
      var nLine = arr.length + num

      // textarea文本总高度
      var textareaHeight = Number(nLine) * 20 + 40
     /* 
     * 判断dom.$refs['textarea']是否为初次渲染
     * 若为初次渲染，则不给textarea设置最大高度
     * 若是页面改变触发，则设置textarea的最大高度
     */
      if (dom.$refs['textarea'] !== undefined && textareaHeight >= 75) {
        if (dom.$refs['textarea'].style.maxHeight !== '') {
          dom.$refs['textarea'].style.maxHeight = ''
        }
        if (dom.$el.scrollHeight >= textareaHeight) {
          // textarea滚动条消失之后进制textarea拉伸
          dom.$refs['textarea'].style.maxHeight = textareaHeight + 'px'
        }
      }
  		},
}

至此，需求全部实现