vue监听Enter事件

2018年11月08日发布阅读(10686) 作者：Jerman

vue项目中，如何监听enter事件？
以登录页面为例：

1、监听每一个input输入框

使用vue的@keyup.enter="login", 如果使用的了element-ui或mint-ui，则使用@keyup.enter.native="login"

 <div  class="g-input">
                <!-- user -->
                <mt-field label=" " v-model.trim="loginForm.username" placeholder="请输入用户名" class="login-user" @keyup.enter.native="login"></mt-field>
                <!-- password -->
                <mt-field label=" " v-model="loginForm.password" placeholder="请输入密码" :type="passwordType" class="login-pwd" @keyup.enter.native="login">
                    <div :class="toggleClass" @click="togglePassword"></div>
                </mt-field>
                <mt-field label="验证码" v-model.trim="loginForm.code" placeholder="输入验证码"  @keyup.enter.native="login">
                    <img :src="captcha" height="35px" width="80px" @click="getCode" style="margin-left:10px;">
                </mt-field>
            </div>
            <mt-button type="default" size="large" @click.native="login" class="login-btn login-btn-submit" v-text="loading" :style="loadingStyle"></mt-button>

@keyup.enter有一个缺点就是，使用的当前元素必须要获得focus焦点，如果没有获取到焦点，绑定的就会失效。

所以如果要应用在<button>按钮上就比较尴尬了

2.直接使用`document.addEventListener`监听`keyup`事件

该方法当然在任何元素上都是有效的，也不管是否有focus。但要注意的是，跳出当前组件时一定要销毁它。

mounted() {
    // 绑定enter事件
    this.enterKeyup();
},
beforeDestroy() {
    // 销毁enter事件
    this.enterKeyupDestroyed();
},
methods: {
    enterKey(event) {
        const componentName = this.$route.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() {}
}

目录

vue监听Enter事件

1、监听每一个input输入框

2.直接使用document.addEventListener监听keyup事件

2.直接使用`document.addEventListener`监听`keyup`事件