vue中用div模拟多行文本输入

在vue项目中，我们会遇到这样的需求。输入框的高度要随着输入内容的高度变化。但是当我们用原生的textarea控件却是不支持的。那怎么办呢？我们其实可以用div来模拟实现，给div加入contenteditable="true"。意为段落可编辑。这个属性是所有主流浏览器都支持的属性。好了，话不多说上代码

1.要考虑到会有复用的情况，我们把它抽离出来写成组件 设为子组件（样式可根据自己的需求）

  <template>
    <div style="width:100%">
        <div class="test-textarea"
            v-html="innerText" 
            :contenteditable="canEdit"
            @focus="isLocked = true"
            @blur="isLocked = false"
            @input="changeText"
            ><br /></div>
    </div>
  </template>
  <script>
    export default{
        name: 'editDiv',
        props: {
            value: {
                type: String,
                default: ''
            },
            canEdit: {
                type: Boolean,
                default: true
            }
        },
        data(){
            return {
                innerText: this.value,
                isLocked: false
            }
        },
        watch: {
            'value'(){
                if (!this.isLocked || !this.innerText) {
                    this.innerText = this.value;
                }
            }
        },
        mounted(){
            // console.log(this.value)
        },
        methods: {
            changeText(){
                this.$emit('input', this.$el.innerHTML);
            }
        }
    }
  </script>

  <style>
    .test-textarea {
        width: 99%;
        line-height: 24px;
        _height: 40px;
        padding: 3px;
        padding-left: 0px;
        outline: 0;
        font-size: 14px;
        word-wrap: break-word;
        overflow-x: hidden;
        overflow-y: auto;
        -webkit-user-modify: read-write-plaintext-only;
        border-radius: 2px;
    }
  </style>

2.在父组件中调用

//首先要引用，路径根据自己的路径进行填写
import textareaEdit from "textarea"; //编辑框
//注册
components:{
    textareaEdit,
},
//html引用 这里面message就代表着输入框里面输入的内容，直接用就可以了，
<textareaEdit v-model="message" class="textareaEdit" ></textareaEdit>

这样就可以使用了。