vue获取textarea 光标的位置并插入文字

vue不使用UI框架texteare

html

<textarea v-model="content" id="textarea" type="textarea" rows="2" autocomplete="off" style="width: 100%;height: 60px;"></textarea>
<divstyle="margin-left: 30px;">
    <ul v-for="(f,i) in friend_list">
        <li class="nameList" @click="insertAtCursor(f.name)">{{f.name}}</li>
    </ul>
</div>

script

new Vue({
    el: '#app',
    data: {
        content: '',
        friend_list: [{
            name: "【QQ音乐】",
        }, {
            name: "【网易云音乐】",
        }, {
            name: "【酷狗音乐】",
        }, {
            name: "【酷我音乐】",
        }, {
            name: "【哔哩哔哩】",
        }, {
            name: "【咪咕音乐】",
        }, {
            name: "【千千音乐】"
        }],
    },
    methods: {
        async insertAtCursor(myValue) {
            const myField = document.querySelector('#textarea')
            if (myField.selectionStart || myField.selectionStart === 0) {
                var startPos = myField.selectionStart
                var endPos = myField.selectionEnd
                this.content = myField.value.substring(0, startPos) + myValue + myField.value.substring(endPos, myField.value.length)
                await this.$nextTick() // 这句是重点, 圈起来
                myField.focus()
                myField.setSelectionRange(endPos + myValue.length, endPos + myValue.length)
            } else {
                this.content += myValue
            }
        },
    }
})

vue使用了element ui

<el-input type="textarea" :rows="2" placeholder="请输入内容" v-model="content" id="textarea"></el-input>
<div style="margin-left: 30px;">
    <ul v-for="(f,i) in friend_list">
        <li class="nameList" @click="insertAtCursor(f.name)">{{f.name}}</li>
    </ul>
</div>

new Vue({
    el: '#app',
    data: {
        content: '',
        friend_list: [{
            name: "【QQ音乐】",
        }, {
            name: "【网易云音乐】",
        }, {
            name: "【酷狗音乐】",
        }, {
            name: "【酷我音乐】",
        }, {
            name: "【哔哩哔哩】",
        }, {
            name: "【咪咕音乐】",
        }, {
            name: "【千千音乐】"
        }],
    },
    methods: {
        async insertAtCursor(myValue) {
            const myField = document.querySelector('#textarea textarea')
            if (myField.selectionStart || myField.selectionStart === 0) {
                var startPos = myField.selectionStart
                var endPos = myField.selectionEnd
                this.content = myField.value.substring(0, startPos) + myValue + myField.value.substring(endPos, myField.value.length)
                await this.$nextTick() // 这里是重点
                myField.focus()
                myField.setSelectionRange(endPos + myValue.length, endPos + myValue.length)
            } else {
                this.content += myValue
            }
        },
    }
})

效果图