Explicación detallada de los eventos de teclado vinculantes en el proyecto vue

En el proyecto Vue, a veces se encuentra que un evento de teclado está vinculado a un cuadro de entrada de texto o un botón, y el más común es el evento de entrada.

De acuerdo con el método proporcionado por el sitio web oficial de vue:

v-on:keyup.enter

Taquigrafía:

@keyup.enter

Si está vinculado al componente, debe agregar el modificador nativo

 <el-input
          v-focus
          :placeholder="$t('enterPoolName')"
          v-model.trim="strPool"
          :maxlength="100"
          @keyup.enter.native="handleSearchMember"
        >
          <i slot="prefix" class="el-input__icon el-icon-search"></i>
        </el-input>

Sin embargo, este método solo puede funcionar cuando se obtiene el foco. Si se pierde el foco, los eventos del teclado no se pueden realizar.

Si existe un requisito para que el proyecto ejecute los eventos de teclado correspondientes y complete los comportamientos predeterminados, como enviar un formulario para iniciar sesión, etc., cuando el proyecto pierde el foco.

Luego, debe tomar un método convencional, vincular el evento del teclado al documento del documento y luego ejecutar la respuesta del evento del teclado obteniendo el valor de cada tecla en el teclado.

mounted() {
    const that = this;
    document.addEventListener('keydown', that.handleWatchEnter);
  },
  methods: {
    handleWatchEnter(e) {
      var key = window.event ? e.keyCode : e.which;
      console.log(key);
      if (key === 13) {
        // 这里执行相应的行为动作
        console.log('++++');
      }
    },
}

Finalmente, adjunte el valor correspondiente a cada tecla del teclado y el método de escritura del evento del teclado vue:

Evento de teclado de botón en vue 

@keydown (activado cuando se presiona el teclado), @keypress (activado cuando se presiona el teclado), @keyup (teclado emergente)

Obtenga el código de la llave e.keyCode de la llave

@keyup.13 presiona enter

@keyup.enter Entrar

@keyup.up tecla arriba

@keyup.down tecla abajo

@keyup.left botón izquierdo

@keyup.derecha derecha

@keyup.delete eliminar clave