Vue进阶（幺叁玖）：textarea文本框根据内容自适应改变高度

项目开发过程中，在展示用户录入意见信息时，使用el-input标签，type=”textarea”属性，在指定:row=”number”后，若输入文本量或显示文本量超过指定行数后，会出现垂直滚动条，但在IE环境下，该滚动条是隐藏的，用户体验性不好，故考虑实现文本框根据文本内容自适应高度的效果。应用代码如下：

<template>
    <div class="my-textarea">
      <textarea ref="textarea" :style="{'height': height}" v-model="value" class="textarea" ></textarea>
    </div>
</template>

<script>
  import calcTextareaHeight from '@/assets/calcTextareaHeight';

  export default {
    name: 'my-textarea',
    data() {
      return {
        // textarea内容
        value: '',
        // 动态高度
        height: '30px'
      }
    },
    watch: {
      value() {
        this.getHeight();
      }
    },
    methods: {
      getHeight() {
        this.height = calcTextareaHeight(this.$refs.textarea, 1, null).height;
      }
    }
  }
</script>

<style scoped>
  .my-textarea .textarea {
    display: inline-block;
    width: 400px;
    /*height: 30px;*/
    line-height: 30px;
    font-size: 30px;
    resize: none;
  }
</style>
复制代码

基于el-input封装的自定义组件cus-input下载地址：点击下载

应用方法：

<cus-input type=”textarea” :autosize=”AUTOSIZE”></cus-imput>
import CusInput from ‘...’
export default {
component: {CusInput }
data () {
	return {
		AUTOSIZE: {
		minrows: 1,
		maxrows: 20
		}
	}
}
}
复制代码

以上实现了textarea文本输入框最大显示上限为20行，大约1200汉字。