vue回车键进行列表页查询

如果只是单个输入框进行搜索 用标签自带的@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() {
      这里面就是正常的查询方法
    },
  }
相关推荐
qq. 28040339843 小时前
CSS层叠顺序
前端·css
喝拿铁写前端3 小时前
SmartField AI:让每个字段都找到归属!
前端·算法
猫猫不是喵喵.3 小时前
vue 路由
前端·javascript·vue.js
烛阴3 小时前
JavaScript Import/Export:告别混乱,拥抱模块化!
前端·javascript
bin91534 小时前
DeepSeek 助力 Vue3 开发:打造丝滑的表格(Table)之添加行拖拽排序功能示例12,TableView16_12 拖拽动画示例
前端·javascript·vue.js·ecmascript·deepseek
GISer_Jing4 小时前
[Html]overflow: auto 失效原因,flex 1却未设置min-height &overflow的几个属性以及应用场景
前端·html
程序员黄同学4 小时前
解释 Webpack 中的模块打包机制,如何配置 Webpack 进行项目构建?
前端·webpack·node.js
拉不动的猪4 小时前
vue自定义“权限控制”指令
前端·javascript·vue.js
再学一点就睡4 小时前
浏览器页面渲染机制深度解析:从构建 DOM 到 transform 高效渲染的底层逻辑
前端·css
拉不动的猪5 小时前
刷刷题48 (setState常规问答)
前端·react.js·面试