Cómo monitorear el teclado del teléfono móvil en vue
_history.pushState(null,null,document.URL);
_window.addEventListener('popstate',this.fun,false);/ /false Detener eventos predeterminados
_
}.
2. Cuando la página sea destruida, cancele el seguimiento. De lo contrario, también se monitorearán otras páginas de enrutamiento de Vue (el gancho de destrucción no se ejecutará cuando use keep-alive. Encontré un problema durante el proceso de desarrollo. Cada devolución solo es válida por primera vez y luego ya no). válido, por lo que el evento se vincula dinámicamente cada vez que se abre el cuadro emergente y el evento se desvincula cuando regresa y el problema se resuelve.
destroyed(){
_indow.removeEventListener('popstate',this.fun,false);//false detiene el evento predeterminado
},
p>3. Escribe la operación de escucha dentro del método. El contenido de removeEventListener al cancelar la escucha debe ser el mismo que cuando se activa la escucha, por lo que el método obtenido por la función debe escribirse en
métodos:{
fun(){
console .log("listening");
}
}En vue, se requieren dos condiciones para escuchar la finalización del teclado del teléfono móvil o el botón de búsqueda para activar eventos
1 formulario .form, cuadro de entrada
2. evento @keyup.13 o @keyup directamente, y luego el controlador de eventos determina el evento. keyCode==13
Vue está escuchando eventos de teclado
valor clave real de keyCode
48 a 570 a 9
65 a 90a a z (A a Z)
112 a 135F1 a F24
8Retroceso
9Tab
13Intro
20Caps_Lock
20Caps_Capital_Lock
El código de clave es el valor de clave real.
Bloquear (Bloq Mayús)
32Espacio (Barra espaciadora)
37Izquierda (Flecha izquierda)
38Arriba (Flecha arriba)
39Derecha (Derecha Arrow)
40Abajo (Flecha hacia abajo)
En Vue:
Valor de clave real de alias
.deletedelete/BackSpace
.tabTab
.enterEnter
.escEsc (salir)
.spaceSpace
.leftLeft (flecha izquierda)
.upUp (flecha arriba)
.rightRight (flecha derecha)
.downDown (flecha abajo)
.ctrlCtrl
.altAlt
.shiftShift
.meta (tecla de ventana en el sistema, tecla de comando en mac)
Además, Vue también admite la combinación Escritura:
Combinación de teclas de escritura combinada:
@keyup.alt.67="Función"Alt+C
@click.ctrl="función "Ctrl+Clic
Referencia:
Cómo escuchar eventos de teclado en el componente vue
body
divid="counter-event-example"
p{{total}}/p
botón-contador-on:ee="incrementTotal"/botón-contador
botón-contador-on:ee= " incrementTotal"/botón-contador
/div
script
Vue.component('botón-contador',{
plantilla :'buttonv-on:click=" incremento"{{counter}}/button',
data:function(){
return{
contador :0
}
},
métodos:{
incremento:función(){
este .counter+=1
this.$emit('ee','cc')
}
},
})
newVue({
el:'# contra-evento-ejemplo',
datos:{
total :'arg'
},
métodos:{
incrementTotal:function(b){
this.total =b+' 1';
}
}
}
})
/script
/cuerpo
El componente secundario activa el evento del componente principal a través de $emit. Los parámetros después de $emit pasarán los parámetros al componente principal. Tenga en cuenta que la función de procesamiento de eventos del componente principal se puede escribir directamente como. el nombre de la función, no agregue (), los parámetros se pasarán directamente al controlador de eventos del componente principal. Los parámetros se pasan directamente al controlador de eventos del método del componente principal.