业务场景

在输入数据时，我们有时希望从模板选择内容，插入数据到光标的位置，如果通过Vue直接处理这个没有办法。解决办法，是通过文本框的属性找到光标的位置，插入内容，并赋值。

代码实现

insertContent(vue){
    //这个是通过控件，找到控件的HTML dom，对象，找到文本框。
    const myField = this.$refs.opinionArea.$el.querySelector("textarea");

    if(myField.selectionStart || myField.selectionStart === 0) {
        let startPos = myField.selectionStart;
        let endPos = myField.selectionEnd;
        //插入内容
        let content= myField.value.substring(0, startPos) + value
        + myField.value.substring(endPos, myField.value.length);
        this.$set(this.localData,'opinion',content);
        await this.$nextTick() // 这句是重点, 圈起来
        myField.focus();
        myField.setSelectionRange(endPos + value.length, endPos + value.length);
    } 
    else {
        this.$set(this.localData,'opinion',value);
    }
}