Vue2實現DIV可編輯框效果

原貼：

vue2 實現 div contenteditable=“true” 類似於 v-model 的效果

但是有個問題，就是輸入第一行的時候，光標會跳轉到最前面

if (!this.isLocked || !this.innerText)

問題出在這裏，如果去掉 !this.innerText這個條件或者改成&&就不會出這個問題。但是，又會觸發新的問題，就是在父組件裏面清空內容的時候，頁面不更新。

思路：
設置在點擊以後，將光標移動到最後。解決上面兩個問題。
參考：

Vue中div contenteditable 的光標定位

具體代碼：

<template>
  <div class="text"
       v-html="innerText"
       :contenteditable="canEdit"
       @focus="isLocked = true"
       @blur="isLocked = false"
       @input="changeText">
  </div>
</template>
<script>
  export default {
    name: 'editDiv',
    props: {
      value: {
        type: String,
        default: ''
      },
      canEdit: {
        type: Boolean,
        default: true
      }
    },
    data () {
      return {
        innerText: this.value,
        isLocked: false,
        isFistTime: true
      }
    },
    watch: {
      value () {
        console.log(this.value)
        console.log(this.isLocked)
        if (!this.isLocked || !this.innerText) {
          if (!this.innerText) {
            this.$nextTick(() => {
              this.keepLastIndex(this.$el)
            })
          }
          this.innerText = this.value
        }
        this.isFistTime = false
      },
      isLocked () {
        this.innerText = this.value
      }
    },
    methods: {
      changeText () {
        this.$emit('input', this.$el.innerHTML)
      },
      keepLastIndex (obj) {
        console.log(obj)
        console.log(window.getSelection)
        console.log(document.selection)
        if (window.getSelection) { // ie11 10 9 ff safari
          obj.focus() // 解決ff不獲取焦點無法定位問題
          let range = window.getSelection() // 創建range
          range.selectAllChildren(obj) // range 選擇obj下所有子內容
          range.collapseToEnd() // 光標移至最後
        } else if (document.selection) { // ie10 9 8 7 6 5
          let range = document.selection.createRange() // 創建選擇對象
          // var range = document.body.createTextRange();
          range.moveToElementText(obj) // range定位到obj
          range.collapse(false) // 光標移至最後
          range.select()
        }
      }
    }
  }
</script>