javascript - 在 VUE JS 的 Cursor 位置插入字符

Question

我一直在尝试在光标所在的文本区域中准确插入表情符号。我在网上查看了 how tos 找不到 VUE JS 中的任何特定内容。他们中的大多数都是纯 JS。

我有这个代码

<div class="picker" v-show="showPicker">
    <click-outside :handler="handleClickOutside">
        <picker
            set ="messenger"
            title="Pick your emoji…"
            emoji="point_up"
            @click="addEmoji"
            :emoji-size="16"
        >
        </picker> 
    </click-outside>
</div>

<textarea id="greeting_text_input" class="form-control"
    type="text" 
    v-model="greeting_text"
    rows="8"
    required
    placeholder="Hi {first-name}! Welcome to our bot. Click on the ‘Get 
    Started’ button to begin
">
</textarea>

我的方法

addEmoji(emoji){
        this.greeting_text += emoji.native;
        this.showPicker = !this.showPicker;
    }

显然，这段代码会将字符(在我的例子中是表情符号)添加到字符串的最后。为此，我需要一个纯 vuejs 解决方案。 Vue 中此类问题的最佳实践是什么？因为网络中很少有基于 vanilla JS 或 Jquery 的解决方案。

Answer 1

两步:

1 使用 vue 方式获取 textarea 元素:

1.1 添加ref属性到模板代码中的textarea标签:

<textarea ref="ta"></textarea>

1.2 在这个组件的mounted钩子(Hook)之后获取这个元素:

let textarea = this.$refs.ta

2 获取 textarea 元素的光标位置。

let cursorPosition = textarea.selectionStart

这是引用:ref