contenteditable 元素删掉所有内容后再输入内容，v-model变量不能监听内容变化

contenteditable 属性规定元素内容是否可编辑（元素会从其父元素继承该属性。）

         true： 可以编辑   

         false： 不可编辑

问题：

<span class="textEdit" @blur="textBlur(index, $event)" @dblclick.stop="dbEditText(index, $event)" >{{item.text}}</span>

 contenteditable 属性true元素删掉所有内容后再输入内容，v-model变量不能监听内容变化

           解决：用v-html绑定元素内容

<span class="textEdit" @blur="textBlur(index, $event)" @dblclick.stop="dbEditText(index, $event)" v-html="item.text"/>

元素编辑时手动修改光标聚焦位置：

           dom.setAttribute('contenteditable', true)

           dom.focus()  // 元素聚焦

           const range = window.getSelection() // 创建range

            if (range) {

                 // range 选择obj下所有子内容

                  range.selectAllChildren(dom)

                 // 光标聚焦在文字最后

                  range.collapseToEnd()

             }