vue使用回车搜索搜索
定义一个公共js。common.js
function addEvent(obj, type, callback) {
if (obj.addEventListener) {
// W3C内核
obj.addEventListener(type, callback);
} else {
// IE内核
obj.attachEvent("on" + type, callback);
}
}
/**
* 解决移除事件监听兼容性问题
* @param {Object} obj对象
* @param {String} type时间类型,不带'on'前缀
* @param {Function} callback事件处理程序
*/
function removeEvent(obj, type, callback) {
if (obj.removeEventListener) {
// W3C内核
obj.removeEventListener(type, callback);
} else {
// IE内核
obj.detachEvent('on' + type, callback);
}
}
export default {
addEvent,
removeEvent
}
在main.js中引入
import global from ‘./common’
Vue.prototype.addEvent = global.addEvent
Vue.prototype.removeEvent = global.removeEvent
在页面中使用
1.作用是回车搜索刷新,跳转到别的页面事件没有清除一直在调用,所以在destroyed时要清除事件
2.如果页面中只有一个input的话,在ie中回车会刷新页面,所以在页面中再写一个input然后用v-show="false"隐藏起来就可以了。
mounted(){
this.addEvent(window, "keydown", this.keyDown);
},
methods:{
keyDown(e) {
var ev = document.all ? window.event : e;
if (ev.keyCode == 13) {
//搜索事件
this.clickSearch1();
}
}
},
destroyed() {
this.removeEvent(window, "keydown", this.keyDown);
}