vue 的button 回车键监听事件

原创已于 2023-03-10 11:47:04 修改 · 1.9k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

于 2021-11-02 10:49:55 首次发布

本文介绍了一个简单的PC端搜索功能实现方案，利用HTML和JavaScript结合Vue.js框架来实现头部搜索，并支持用户通过回车键触发搜索操作。

场景：pc端需要头部搜索，并支持回车搜索。如下：

html中：

<template>
    <el-button 
        class="role-name-select" 
        type="primary"
        @click="newItems()"
        @keyup.enter.native="searchEnterFun"
     >查询</el-button>
</template>

js中：

 <script>
  created() {
    this.searchEnterFun();
  },
 methods: {
      // 回车键监听
    searchEnterFun(){
        document.onkeyup = e =>{
              // 为了更加严谨所以添加了路由路径的判断
            if (e.keyCode === 13 && this.$route.path === '/menu/role') {
            //回车后执行搜索方法
                this.newItems();
            }
        }
    },
      // 查询方法
    newItems(pages) {
        
    }
},
</script>