vue监听键盘回车事件--Enter

vue监听键盘回车事件--Enter

方法一：keyup.enter

vue文档提供了一种按键修饰符的方法: <input v-on:keyup.enter="submit"> （keyCode事件已经被废弃），这种方法的使用前提是使用的当前元素必须要获取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() {}
}

 

来源：https://www.cnblogs.com/DreamerLeaf/p/11975439.html