vue 怎么在字符串中指定位置插入字符_在VUE JS中的Cursor位置插入字符

I have been trying to insert emoji in textarea exactly where the cursor is at. I looked around how tos in the web could not find anything specific in VUE JS. Most of them are in plain JS.

I have this Code

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

">

My Method

addEmoji(emoji){

this.greeting_text += emoji.native;

this.showPicker = !this.showPicker;

}

Obviously, this code will add the character (emoji, in my case) to the last of the string. I need a pure vuejs solution for this.

What would be the best practise for this kind of problem in Vue? as there are few solutions in the web that based either in vanilla JS or Jquery.

解决方案

Two steps:

1 get textarea element using a vue-way:

1.1 Add ref attrbute to textarea tag in your template code:

1.2 get this element after mounted hook of this component:

let textarea = this.$refs.ta

2 get cursor position of textarea element.

let cursorPosition = textarea.selectionStart

Here is reference: ref