vue回车键进行列表页查询

周舸洺2024-03-19 18:10

如果只是单个输入框进行搜索用标签自带的@keyup.enter 即可实现

但是一般实际情况都是有很多搜索条件，每个标签都加显得很冗余，还很呆。

所以这里跟大家展示的是全局定义监听回车键的方法级调用

上代码：

一：首先定义一个JS文件，名字随便，我这里起的是keyEvent.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 './api/keyEvent.js'
Vue.prototype.addEvent = global.addEvent
Vue.prototype.removeEvent = global.removeEvent

这里是因为所有的js 包含接口的都写在了api文件夹下

三：页面调用

  mounted() {
    this.addEvent(window, 'keydown', this.keyDown)
    this.queryData()
  },
  destroyed() {
    this.removeEvent(window, 'keydown', this.keyDown)
  },
  methods: {
    // 回车搜索
    keyDown(e) {
      var ev = document.all ? window.event : e
      if (ev.keyCode === 13) {
      // 搜索事件
      this.queryData()
      }
    },
    // 搜索事件
    queryData() {
      这里面就是正常的查询方法
    },
  }