Vue使用div模拟input框，并实现vue双向绑定

 利用div的contenteditable属性，该属性设置为true可以使div可以进行编辑

<template>
    <div class="h-edit-head-content-title edit-div" contenteditable="true" v-text="content"
         @input="changeText"
         @focus="isLocked = true"
         @blur="isLocked = false"
    >
    </div>
</template>

<script>
    module.exports ={
        name: 'editor',
        props: ['value'],
        model: {
            prop: 'value',
            event: 'input',
        },
        data() {
            return {
                content: this.value, //编辑器内容
                isLocked: false
            }
        },
        methods: {
            changeText(){

                //this.content = this.$el.innerHTML;
                this.$emit('input',this.$el.innerHTML);
            }
        }, watch: {
            'value'(){
                if (!this.isLocked || !this.content) {
                    this.content = this.value;
                    //console.log(this.content);
                }
            }
        }

    }
</script>


<style >

    .params .el-form-item__content{
        line-height: 0px !important;
        position: relative;
        font-size: 14px;
    }

    .edit-div {
        width: 100%;
        height: 100%;
        overflow: auto;
        word-break: break-all;
        outline: none;
        user-select: text;
        white-space: pre-wrap;
        text-align: left;
    }
    .edit-div[contenteditable=true] {
        user-modify: read-write-plaintext-only;
    }
    .edit-div[contenteditable=true]:empty:before {
        content: attr(placeholder);
        display: block;
        color: #ccc;
    }
</style>