Al cambiar el error hoy, el producto decía que debía hacer clic en la tecla Intro para eliminar los datos.
Así que primero inyecté el evento de escuchar la tecla del teclado en el componente
created() {
//监听键盘按下事件
window.addEventListener('keydown', this.handEnterCode, true)
},Luego, agregué un método para activar eventos de teclado en métodos
methods:{
// 回车键盘触发该方法
handEnterCode(e) {
if(e.keyCode === 13){
// 删除数据的方法
this.submitPopupData()
}
},
}Finalmente, debe eliminar el evento de cambio cuando salga de esta página; de lo contrario, activará el método de cambio presionando Enter en otra página, lo que resultará en una mala experiencia.
destroyed(){
//销毁回车事件，如果不销毁，在其他页面敲回车也会执行回车登录操作。
window.removeEventListener('keydown',this.keyDown,false);
}Pensé que todo estaría bien de esta manera y esta función se realizó perfectamente, pero apareció otro error durante la reproducción, mira el video a continuación.
ingresar ingresar video de error
Al principio, supuse que la razón de este problema era que el evento del teclado no se eliminó después de que se completó el activador, así que eliminé el evento en la eliminación exitosa, pero aún así no tuvo ningún efecto, así que jugué unas cuantas veces más y Encontré un problema, siempre que presionar Intro para eliminar sea exitoso, continúe presionando Intro, siempre activará el evento del cuadro de eliminación y luego presione Intro para continuar eliminando los datos, pero si elimino los datos después de presionar Intro por primera vez. , después de cerrar, haga clic en cualquier botón de la página. Después de eso o después de hacer clic en cualquier espacio en blanco, no habrá tal problema después de continuar presionando Enter, así que supongo que es el problema de la propagación de eventos (haga clic en el botón Eliminar por primera vez para que aparezca el cuadro de eliminación, si no realiza ninguna operación en este momento, la última vez. El evento anterior aún queda debido a la burbuja, por lo que después de presionar Enter por primera vez para eliminar, debido a la existencia de eventos heredados, el Si presiona Enter por segunda vez, se abrirá la ventana emergente de eliminación y haga clic nuevamente para eliminar directamente, lo que generará un nuevo error), haga clic en otro lugar para borrar este evento heredado, así que busque el problema y resuélvalo, podemos borrar el evento burbujeante. después de activar la tecla Enter
methods:{
// 回车键盘触发该方法
handEnterCode(e) {
// 这句话可以阻止回车事件冒泡;如果注释掉这句话,那么会事件残余
e.preventDefault()
if(e.keyCode === 13){
// 删除数据的方法
this.submitPopupData()
}
},
}