近期产品提出一个需求,用户页面中输入查询参数后,点击回车就能够调用查询功能,自己在网上搜了下实现代码,然后结合自己的想法封装了一个方法,提供大家参考,有更好的提议,可以留言.
1.代码思路:监听用户在页面中按下回车键:然后根据window.loction.hash获取到当前的路由信息.根据访问的路由地址,找到对应页面中的方法.通过bus使两个页面之间调用方法.实现刷新功能
代码实现:
1在index.vue文件中,由于我的页面元素都是通过index.vue页面展示出来,所以我直接在index页面中创建监听用户按下回车的事件.
created(){
//页面初始化的时候就注册该方法 才能监听到用户按下键盘的操作
this.keyupEnter()
},
methods:{
keyupEnter(){
document.onkeydown = e =>{
//按下键盘回车
if (e.keyCode === 13) {
//截取路径 hash模式 :#/index => index
let arrd = window.location.hash.substring(window.location.hash.indexOf('/')+1,window.location.hash.length)
if(window.location.href.indexOf(arrd) !== -1){
//提交信息 this.bus.$on 接收的时候 调用页面的查询方法 ${arrd}:路由: 如 index => indexUpkey this.bus.$on('indexUpkey',val=>{需要处理的操作})
//this.bus.$emit('名称',值)
this.bus.$emit(`${arrd}Upkey`)
}
}
}
},
}
2.在需要用到按下调用刷新的页面中 接收index.vue传递的信息
mounted() {
//因为this.bus.$on 只有会在 this.bus.$emit调用的时候才会触发$on 所以写在这里,第一次进入页面也不会触发, this.bus.$emit ('名称',传递的值) 和 this.bus.$on('名称',接收值:val={}) 俩名称需要一致,否则就算触发了$emit 但是 $emit 和 $on 的名称不一致,他们两也是没有关系的,当然也就接收不到$emit传递的数据
this.bus.$on('userUpkey',()=>{
//调用该页面的查询方法
this.upDownScan()
})
},
这次分享就结束了