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

<template>
    <div class="my-textarea">
      <textarea ref="textarea" :style="{'height': height}" v-model="value" class="textarea" ></textarea>
</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汉字。