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() {
      这里面就是正常的查询方法
    },
  }
相关推荐
一斤代码1 小时前
vue3 下载图片(标签内容可转图)
前端·javascript·vue
中微子1 小时前
React Router 源码深度剖析解决面试中的深层次问题
前端·react.js
光影少年1 小时前
从前端转go开发的学习路线
前端·学习·golang
中微子2 小时前
React Router 面试指南:从基础到实战
前端·react.js·前端框架
3Katrina2 小时前
深入理解 useLayoutEffect:解决 UI "闪烁"问题的利器
前端·javascript·面试
前端_学习之路3 小时前
React--Fiber 架构
前端·react.js·架构
coderlin_3 小时前
BI布局拖拽 (1) 深入react-gird-layout源码
android·javascript·react.js
伍哥的传说3 小时前
React 实现五子棋人机对战小游戏
前端·javascript·react.js·前端框架·node.js·ecmascript·js
qq_424409193 小时前
uniapp的app项目,某个页面长时间无操作,返回首页
前端·vue.js·uni-app
我在北京coding3 小时前
element el-table渲染二维对象数组
前端·javascript·vue.js