vue点击enter键查询数据（组件封装）

封装方法的util.js

/**
 * @description 注册回车事件
 */
export const handleEnter = (sel) => {
  document.onkeydown = (e) => { //按下回车查询
    var event = e || window.event;
    if (event.keyCode && event.keyCode == 13) {
      sel();
    } else if (event.which == 13) {
      sel();
    }
  };
};

页面引用

<template> 
<el-form :inline="true" :model="searchForm" class="demo-form-inline">
          <el-form-item label="" style="width: 31%">
            <div class="flex select-and-input">
             
              <el-input
                class="keyword-input"
                clearable
                type="text"
                placeholder="请输入关键词"
                v-model="searchForm.keyword"
              ></el-input>
            </div>
          </el-form-item>
          </el-form-item>
          <el-form-item class="btn-box">
            <el-button type="primary" icon="el-icon-search" @click="onSubmit">查询</el-button>
          
          </el-form-item>
        </el-form>
<template>
<script>
import { handleEnter } from '@/util/util.js'; //导入js文件
export default {
  name: 'sms-select-ticket-personnel',
  data() {
    return {
searchForm:{keyword:'',//关键字}

    };
},
 methods: {
//查询事件
onSubmit(){}
},
  mounted() {
    handleEnter(this.onSubmit); //按enter查询
  },
  beforeDestroy() {
    document.onkeydown = null; //离开当前路由，会直接调用beforeDestroy方法销毁回车事件
  },
};
</script>