Vue封装回车查询事件

1、实现函数 在utils目录下创建tools.js文件（我这边用的是JavaScript，用typescript就创建tools.ts文件）

/** * @description 注册回车事件 * @param cb * @author 秃头程序员 */ export const handleEnter = (hc) => { document.onkeydown = (e) => { //按下回车提交 var event = e || window.event; if (event.keyCode && event.keyCode == 13) { hc(); } else if (event.which == 13){ hc(); } }; };

2、组件内使用 在要使用的组件内按照如下代码使用

import { handleEnter } from '@/utils/tools'; //导入js文件 created(){ handleEnter(this.queryBtn) //页面初始化时调用、把查询方法传递进来 } beforeDestroy(){ document.onkeydown = null; //离开当前路由，会直接调用beforeDestroy方法销毁回车事件 }

只需要四步就可以实现回车查询，不用每个下拉框、输入框都绑定事件