vue div可编辑

<div
    class="genergz"
    :contenteditable="inputEdit"
    @input="updateText"
    @blur="blur('constructionUnit_dictText')"
>
    {{ model.constructionUnit_dictText }}
</div>

contentEditable：html标签的一个属性。设置标签的contentEditable="true"时，即可开启该元素的编辑模式。

@input: 监听每次输入的值

@blur: 失去焦点事件

updateText(event) {
    this.innerHTML = event.target.innerHTML // 存储更改的值
    this.innerHTMLBool = true;
},
blur(key) {
    if (this.innerHTMLBool) { // 判断是否进行更改过
        this.model[key] = this.innerHTML  // 赋值到对象中
        this.innerHTMLBool = false;
    }
},