Vue 的键盘事件绑定无效

Qiang 发布在Q&A 于 03-27-2023 1

Vue3 在绑定键盘事件时，无法触发绑定事件，代码如下：

<div id="app">
    <div @click="close()"> {{ message }}</div>
    <div @keydown.i="open"></div>
</div>
<script src="https://unpkg.com/vue@next"></script>
<script>
    Vue.createApp({
        data() {
            return {
                message: 'Hello, Vue 3!'
            };
        },
        methods: {
            open() {
                console.log("open this");
            },
            close() {
                console.log("close this");
            },
        }
    }).mount('#app');
</script>

按下快捷键 i，无法调用 open 函数。

🥶 Q&A

TOP

excing 03-27

Vue 绑定的键盘事件，只能在元素获得焦点时生效，比如：

<div id="app">
    <div @click="close()"> {{ message }}</div>
    <input @keydown.i="open()" type="submit" value="Submit"></input>
</div>
<script src="https://unpkg.com/vue@next"></script>
<script>
    Vue.createApp({
        data() {
            return {
                message: 'Hello, Vue 3!'
            };
        },
        methods: {
            open() {
                console.log("open this");
            },
            close() {
                console.log("close this");
            },
        }
    }).mount('#app');
</script>

当我们点击 Submit 按钮时，Submit 获得焦点，此时按下 i 键，我们可以在控制台 open this 的输出。

excing 03-27

Vue 中，在元素上绑定键盘事件，只能在元素获得焦点时生效，想要全局使用快捷键，可以使用 Vue 的 mounted 这个钩子函数，将 Vue 实例的特定函数注册到按键事件，比如 handleKeydownFunc，代码如下：

<div id="app">
    <div @click="close()"> {{ message }}</div>
    <input type="submit" value="Submit"></input>
</div>
<script src="https://unpkg.com/vue@next"></script>
<script>
    Vue.createApp({
        data() {
            return {
                message: 'Hello, Vue 3!'
            };
        },
        mounted() {
            addEventListener('keydown', this.handleKeydownFunc)
        },
        methods: {
            open() {
                console.log("open this");
            },
            close() {
                console.log("close this");
            },
            handleKeydownFunc(e) {
                switch (e.code) {
                    case "KeyI":
                        this.open()
                        break;
                
                    default:
                        break;
                }
            },
        }
    }).mount('#app');
</script>

也就是说，这种方式抛弃了 Vue 的按键事件语法糖，转用传统的键盘事件处理方式。当我们按下 i 键，那么我们可以看到控制台打印的 open this 字符串。

在 Vue 中，mounted 方法是一个生命周期钩子函数，它会在 Vue 实例挂载到 DOM 元素上后被调用。在 mounted 方法中，可以进行一些 DOM 操作、数据初始化、事件监听等操作。
具体来说，mounted 方法适合进行以下操作：

发送网络请求获取数据并更新组件的状态。

初始化一些需要依赖 DOM 元素的插件或库，例如轮播图、地图等。

监听一些需要依赖 DOM 元素的事件，例如滚动事件、鼠标事件等。

执行一些需要在组件挂载后立即执行的操作。

需要注意的是，mounted 方法只会在组件挂载时被调用一次，如果需要在组件更新时执行一些操作，可以使用 updated 方法。

前往 GitHub Discussion 评论

Qiang's Blog

🗂️ 归档

📑 分类

🏷️ 标签

👉 About

Vue 的键盘事件绑定无效