La entrada de Vue obtiene la posición del cursor y agrega contenido

En el proyecto, es necesario agregar contenido en cualquier posición en el cuadro de entrada, aquí, se realiza a través del atributo selectionStart de la entrada y el método setSelectionRange.

Primero mire el atributo selectionStart, que se usa para obtener la posición inicial del área de selección del cuadro de texto, y selectionEnd se usa para obtener la posición final del área de selección del cuadro de texto, por ejemplo:

En esta función, en lugar de seleccionar texto, principalmente necesitamos obtener la posición del cursor.Cuando el texto no está seleccionado, los valores de las propiedades SelectionStart y SelectionEnd son los mismos.

Mire nuevamente el método setSelectionRange, también actúa sobre el elemento de entrada, puede seleccionar una parte de un texto configurando las posiciones inicial y final, inputElement.setSelectionRange(selectionStart, selectionEnd, [opcional] selectionDirection), también puede elegir el dirección. Cuando la posición inicial es la misma que la posición final, es equivalente a cambiar la posición del cursor en el cuadro de entrada.

Eche un vistazo a la implementación específica:

el código se muestra a continuación:

async insertContent(val){
   let dom = this.$refs.textareaI.$refs.textarea;
   // console.dir(dom);
   let index  = dom.selectionStart;
   let contont = dom.value;
   this.textarea = contont.substring(0,index) + val + contont.substring(index,contont.length)
   await this.$nextTick();
    dom.focus();
    dom.setSelectionRange(index + val.length,index + val.length)
},

Algunos puntos a tener en cuenta: asegúrese de esperar hasta que se complete la actualización del dom antes de cambiar la posición del cursor;

Otro pequeño consejo:

Ya sea el nodo de elemento obtenido por ref en vue, o el nodo obtenido por native, cuando queremos ver las propiedades del nodo de elemento, podemos verlo a través de estos tres métodos:

1. matriz de paquetes: console.log([dom])

2. Objeto del paquete: console.log({dom})

3. Use console.dir para imprimir, puede imprimir todas las propiedades y valores de propiedad del objeto.