方法一:回车键监听的例子

回车键调用search方法

<input v-on:keyup.enter="search">

简写

<input @keyup.enter="search">

在ElementUI组件框架中

<input @keyup.enter.native="search">

方法的使用前提是使用的当前元素必须要获取focus焦点,如果没有获取到焦点,绑定就会失效,因此给div或者p进行事件监听时,这种方法显示是不适用的;

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

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() {}
}

全部的键盘别名:
.enter
.tab
.delete “退格”和“删除”
.esc
.space
.up
.down
.left
.right

Logo

前往低代码交流专区

更多推荐