vue3enter事件

最新推荐文章于 2024-07-16 17:45:14 发布

风兮梧桐

最新推荐文章于 2024-07-16 17:45:14 发布

阅读量2.1k

点赞数

分类专栏： VUE3 文章标签： javascript vue.js 前端

本文链接：https://blog.csdn.net/weixin_51263829/article/details/130149671

版权

VUE3 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

该文章描述了一个Vue组件中的登录按钮，按钮绑定了`@click`和`@keydown.enter`事件，分别在点击和按下回车时触发`submitForm()`和`keyDown()`函数。`keyDown()`函数检查键盘的keyCode，当检测到回车键（13或100）时调用登录提交函数。在组件挂载和卸载时，动态地添加和移除全局键盘事件监听器，确保事件处理的生命周期管理。

摘要由CSDN通过智能技术生成


            <button type="primary"
                    class="logonstyle"
                    @click="submitForm()"
                    @keydown.enter="keyDown()"
            >
                登录
            </button>


onMounted(() => {
  // 绑定监听事件
  window.addEventListener('keydown', keyDown)
})
onUnmounted(() => {
  // 销毁事件
  window.removeEventListener('keydown', keyDown, false)
})
// 点击回车键登录
const keyDown = (e) => {
  if (e.keyCode === 13 || e.keyCode === 100) {
    console.log('触发回车事件')
    submitForm()
  }
}