Vue封装回车查询事件

   日期:2020-09-05     浏览:100    评论:0    
核心提示:1、实现函数在utils目录下创建tools.js文件(我这边用的是JavaScript,用typescript就创建tools.ts文件)export const handleEnter = (hc) => { [removed] = (e) => { //按下回车提交 var event = e || window.event;

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



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方法销毁回车事件
}

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

 
打赏
 本文转载自:网络 
所有权利归属于原作者,如文章来源标示错误或侵犯了您的权利请联系微信13520258486
更多>最近资讯中心
更多>最新资讯中心
0相关评论

推荐图文
推荐资讯中心
点击排行
最新信息
新手指南
采购商服务
供应商服务
交易安全
关注我们
手机网站:
新浪微博:
微信关注:

13520258486

周一至周五 9:00-18:00
(其他时间联系在线客服)

24小时在线客服