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