动态监听可编辑DIV内容变化

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 赋值给可编辑输入框绑定的值，否则重新赋值会使输入框的光标跑到最前面！！！