Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

309
Views
Mostrar ventana emergente en Markdown después del signo '@' para buscar usuarios

Estoy tratando de recrear la funcionalidad de Gitlab para mostrar la lista de usuarios después de escribir el signo '@'.

Actualmente estoy tratando de agregarlo a Tui Editor (usando Vue).

Sé cómo escuchar la clave y agregarla como Widget, pero tiene algunos inconvenientes.

 editor.on('keyup', (editorType, ev) => { if (ev.key === '@') { const userMenu = this.$refs.userMenu; refEditor.addWidget(userMenu.$el, 'top'); } });
  1. Después de escribir cualquier cosa después de que desaparezca la ventana emergente '@'.
  2. Cuando escribo algo como '@an' y elimino 'an', no vuelve a mostrar una ventana emergente.
  3. Cuando pierdo el enfoque de Markdown y luego lo enfoco nuevamente y el símbolo de intercalación está justo después del signo @, no muestra una ventana emergente.

En este punto no estoy seguro de por dónde debo empezar.

Entonces debería funcionar de esta manera: escribir '@' debería mostrarme una ventana emergente y cuando escribo letras, debería filtrar a los usuarios de acuerdo con esas letras. Debería hacer que la ventana emergente sea visible siempre que @ esté al comienzo de una palabra, por lo que '@@' o 'f@' no deberían funcionar.

Usando: ES6+, Vue 2, Tui Editor, Vuetify.

about 4 years ago · Juan Pablo Isaza
1 answers
Answer question

0

entonces la lógica debería ser la siguiente:

  1. el usuario escribe la entrada y usamos v-model para adjuntarlo a un objeto de datos. y queremos iniciar una variable de datos isTag a falso
  2. queremos escuchar cada palabra hasta que escuchemos '@', así que básicamente, queremos escuchar el primer clic cuando los datos de entrada están vacíos
  3. si escuchamos '@', establecemos isTag en verdadero
  4. ahora, usando v-if , podemos abrir nuestro modal condicionalmente y escuchar usando el v-model los datos de escritura a medida que cambian.

No conozco tui-editor , así que solo puedo ayudarte con el código vue ; seria algo asi ( jsfiddle )

about 4 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!