Implemente el cuadro de entrada en Vue, presione Entrar para agregar una línea y enfoque

Las páginas de destino del sitio web oficial de muchas empresas tienen tal requisito. Después de que el usuario haya ingresado el nombre de usuario, presione la tecla Intro en el teclado para cambiar al cuadro de ingreso de contraseña en la siguiente línea y enfoque el cursor en la línea del cuadro de contraseña .Esta función se enfoca principalmente Se realiza activando el evento de enfoque del cuadro de entrada

1. Céntrese en el cuadro de contraseña (determine el valor de referencia)

Agregamos el atributo ref al cuadro de contraseña como passwordInput, escuchamos el evento Enter del cuadro de ingreso de nombre de usuario, agregamos el siguiente código y puedes enfocarte en el cuadro de contraseña

this.$refs.passwordInput.focus(); 

2. Use v-for para agregar dinámicamente una referencia a cada entrada

Ahora nuestras necesidades han cambiado. Ya no es un valor de referencia definido. Cuando se presiona la tecla Enter, se agrega un cuadro de entrada y el foco está en el cuadro de entrada recién agregado

[1] Lista de matrices

  data() {
    return {
      questionList: [
        { question: "" }
      ],
    };
  },

[2] v-for recorre la lista de matrices, agregando dinámicamente una referencia para cada elemento.

  <div v-for="(item, index) in questionList" :key="index">
    <Input v-model="item.question" :ref="`question`" @keyup.enter.native="addRow(index)" />
  </div>

[3] Ingresar evento

Agregue una fila a la lista de matrices y céntrese en esa fila

  methods: {
    addRow(index) {
      // 增加行
      let obj = { question: "" };
      this.quesionList.splice(index + 1, 0, obj);

      // 聚焦
      this.$nextTick(() => {
        this.$refs.question[index + 1].focus();
      });
    }
  }

【4】 Efecto

Los artículos se actualizan continuamente cada semana. Puede buscar " Colección de aplicaciones para  el usuario " en WeChat para  leerlo por primera vez, responder a [ Video ] [ Libro ] para recibir materiales de video de 200G y 30 materiales de libros en PDF

​