vue监控回车事件

vue监听键盘回车事件–Enter

方法一：keyup.enter

vue文档提供了一种按键修饰符的方法:

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

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

<input
    type="text"
   v-on:keyup.enter="submit"
    class="input"
    v-model="searchword"
    placeholder="请输入标签"
/>
/

data() {
    return {
        searchword: "",
    };
},
/
submit() {
    console.log(11111);
},

方法二：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() {}
}

第三种：用jQuery

<input
    type="text"
    @click="searchfn()"
    v-on:keyup.enter="submit"
    class="input"
    v-model="searchword"
    placeholder="请输入标签"
/>



data() {
    return {
        searchword: "",
    };
},
/
searchfn() {
    let _this = this;
    $(".input").on("keypress", function(e) {
        var keycode = e.keyCode;
        if (keycode == "13") {
            _this.tags.unshift(_this.searchword);
            _this.searchword = "";
        }
    });
},