vue版本：2.6.14
ElementUI版本：^2.15.6
场景描述：业务中需要在输入框中显示html，所以采用了可编辑DIV，但是需要监听DIV中内容变化来设置提交按钮的disabled状态。
方法来源：https://www.codenong.com/js848bda517abf/
解决方法：
<template>
<div>
编辑区：
<!-- contenteditable使div内容可编辑 -->
<div ref="entry" class="entry" contenteditable="true" v-html="data" @input="handleInputEvent" @blur="handleBlurEvent"></div>
<el-button :disabled="isSubmitDisabled">提交</el-button>
</div>
</template>
<script>
export default {
data () {
return {
data: '',
dataCopy: '',
isSubmitDisabled: true,
}
},
methods: {
handleInputEvent(e) {
// 此时 dataCopy 获取的内容即为可编辑DIV中动态输入的值
// 注意：不能将 dataCopy 赋值给可编辑输入框绑定的值 data，否则重新赋值会使输入框的光标跑到最前面！！！
this.dataCopy = this.$refs.entry.innerHTML;
if(this.dataCopy !== '') {
this.isSubmitDisabled = false;
} else {
this.isSubmitDisabled = false;
}
},
// 当光标失去焦点（也就是点击提交按钮的时候）给data赋值最后输入结果即可
handleBlurEvent(e) {
this.data = e.target.innerHTML;
}
},
}
</script>
<style lang="less" scoped>
// 改变可编辑div聚焦时的边框颜色
.entry:focus {
outline: none;
border: 1px solid #65a0fa;
}
</style>
注意点就是：动态获取的div的innerHTML,只是用来判断是否输入了内容，
不能将 data 赋值给可编辑输入框绑定的值，否则重新赋值会使输入框的光标跑到最前面！！！
