vue 监听键盘回车事件

参考文章： https://www.cnblogs.com/DreamerLeaf/p/11975439.html

今天项目提了新需求，在每个展示页面的搜索新增回车搜索功能，之前登录页的时候也有做过，不过输入框就几个就直接在输入框加了监听事件，但是展示页面的搜索框是在有点多，一个个监听不太实际，现在来总结下两种方法

方法一：keyup.enter

使用：vue文档提供了一种按键修饰符的方法: <input v-on:keyup.enter="submit">
注意：这种方法的使用前提是使用的当前元素必须要获取focus焦点，如果没有获取到焦点，绑定就会失效，因此给div或者p进行事件监听时，这种方法显示是不适用的；

方法二： document.addEventListener监听keyup事件

注意：这种方法对任何元素都有效，不必须获取focus。但应该注意的是，跳出当前组件时一定要销毁监听。

mounted() {
    // 绑定enter事件
    this.enterKeyup();
},
destroyed() {
    // 销毁enter事件
    this.enterKeyupDestroyed();
},
methods: {
    enterKey(event) {
        const componentName = this.$options.name;
        if (componentName == "Login") {
            const code = event.keyCode
                ? event.keyCode
                : event.which
                    ? event.which
                    : event.charCode;
            if (code == 13) {
                this.login();
            }
        }
    },
    enterKeyupDestroyed() {
        document.removeEventListener("keyup", this.enterKey);
    },
    enterKeyup() {
        document.addEventListener("keyup", this.enterKey);
    },
    // 登录
    login() {}
}