高度自动撑开的输入框元素

一、elementUI 输入框组件el-input type = textarea 时通过设置autosize属性可以使得文本域的高度能够根据文本内容自动进行调整，并且autosize还可以设定为一个对象，指定最小行数和最大行数。
二、元素contenteditable属性可以控制元素是否可以输入编辑。div加上这个属性就可以作为一个高度自动撑开的输入框。
在Vue中创建全局组件使用：
1、创建输入框组件MyInput：

<template>
  <div :id="Id" class="my-input" :contenteditable="!disabled" @input="changeText" v-html="innerText"></div>
</template>

<script>
  export default{
    name: "MyInput",
    props: {
      value:"",
      disabled:{},
    },
    data: function() {
      return {
        innerText: "",
        Id:"",
      }
    },
    mounted(){
      this.init();
    },
    methods: {
      init(){
        // console.log(this.value)
        this.Id = this.$getGuid();//生成一个不重复的随机Id
        this.innerText = this.value;
      },
      changeText() {
        let text = $(`#${this.Id}`).html();
        this.$emit('input', text);
      }
    }
  }
</script>

<style scoped>
  .my-input {
     100%;
    font-size: 13px;
    line-height: 20px;
    outline: none;
    border: 0;
    padding: 0 10px;
    text-align: left;
  }
  .my-input:empty::before {
    content: "输入...";
    color: #999;
  }
  .my-input:focus::before {
    content: none;
  }
</style>

2、全局注册组件

import MyInput from "./components/common/myInput"
Vue.component('my-input',MyInput);

3、引用该组件

<my-input :disabled="forbidden" v-model="content"></my-input>