场景:

1. 在vue中, 又在for循环中, 给div元素配置contenteditable属性,  但是使用不了v-model绑定

2. 点击外部元素需要聚焦并将光标聚焦到最后位置

方案: 

1. 使用vue-input-contenteditable第三方包, 可以使用v-model绑定, 

// 下载
yarn add vue-input-contenteditable// 导入并引用
<template><input-contenteditablev-model="myModel"id="id"_is="p":placeholder="myPlaceHolder":maxlength="25" />
</template><script>
import InputContenteditable from 'vue-input-contenteditable';export default {components: {'input-contenteditable': InputContenteditable},data: {myModel: '',myPlaceholder: 'Type your data here...'}
};
</script>

2. 点击外部元素需要聚焦并将光标聚焦到最后位置

// 光标聚焦到末尾
const dom = document.getElementById('id')
dom && dom.focus()
document.execCommand('selectAll', false, null);
document.getSelection().collapseToEnd();