vue使用回车搜索搜索

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);
  }