vue中 contenteditable 中如何将光标聚焦到最后位置

场景:

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

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

方案: 

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

// 下载
yarn add vue-input-contenteditable


// 导入并引用
<template>
    <input-contenteditable
        v-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();