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() {
      这里面就是正常的查询方法
    },
  }
相关推荐
BillKu3 分钟前
vue3中nextTick的作用及示例
javascript·vue.js·ecmascript
恋猫de小郭5 分钟前
Flutter 在 Dart 3.8 开始支持 Null-Aware Elements 语法,自动识别集合里的空元素
android·前端·flutter
智绘前端5 分钟前
Nuxt3中使用UnoCSS指南
前端·chrome
john_Asura6 分钟前
Vue3 自定义指令完全指南
前端·javascript·vue.js·npm·html
墨渊君9 分钟前
还原 Mac Dock 栏动效: 一步步打造流畅的波形缩放动画
前端·css·react.js
凌览14 分钟前
4.4K Star 的 chrome-remote-interface 竟有这样的神功,不用写浏览器插件轻松搞定账号密码自动化填充
前端·后端·trae
独立开阀者_FwtCoder29 分钟前
用分层结构扩展你的 React 项目
前端·javascript·后端
独立开阀者_FwtCoder33 分钟前
AI 神器!一键把 Vue3 源码解析成文档!
前端·javascript·vue.js
观默35 分钟前
90分钟从想法到发布,我是这样做的
前端·ai编程
筱筱°37 分钟前
Vue 登录 记住密码,设置存储时间
前端·javascript·vue.js