vue版本：2.6.14
ElementUI版本：^2.15.6

場景描述：業(yè)務(wù)中需要在輸入框中顯示html，所以采用了可編輯DIV，但是需要監(jiān)聽DIV中內(nèi)容變化來設(shè)置提交按鈕的disabled狀態(tài)。

方法來源：https://www.codenong.com/js848bda517abf/
解決方法：

<template>
  <div>
    編輯區(qū)：
    <!-- contenteditable使div內(nèi)容可編輯 -->
    <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 獲取的內(nèi)容即為可編輯DIV中動態(tài)輸入的值
        // 注意：不能將 dataCopy 賦值給可編輯輸入框綁定的值 data，否則重新賦值會使輸入框的光標(biāo)跑到最前面?。。?        this.dataCopy = this.$refs.entry.innerHTML;
        if(this.dataCopy !== '') {
          this.isSubmitDisabled = false;
        } else {
          this.isSubmitDisabled = false;
        }
      },
      // 當(dāng)光標(biāo)失去焦點（也就是點擊提交按鈕的時候）給data賦值最后輸入結(jié)果即可
      handleBlurEvent(e) {
        this.data = e.target.innerHTML;
      }
    },
  }
</script>
<style lang="less" scoped>
// 改變可編輯div聚焦時的邊框顏色
.entry:focus {
  outline: none;
  border: 1px solid #65a0fa;
}
</style>

注意點就是：動態(tài)獲取的div的innerHTML,只是用來判斷是否輸入了內(nèi)容，
不能將 data 賦值給可編輯輸入框綁定的值，否則重新賦值會使輸入框的光標(biāo)跑到最前面?。。?/p>