Vue.js中的键盘事件失效问题

最新推荐文章于 2023-02-25 14:58:42 发布

聪明可爱小轩轩

最新推荐文章于 2023-02-25 14:58:42 发布

阅读量1.5k

点赞数 2

分类专栏： Vue

本文链接：https://blog.csdn.net/qq_43238599/article/details/103525542

版权

Vue 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

本文探讨了在登录界面使用Enter键代替点击按钮提交表单的常见错误及正确做法。指出直接在按钮上同时绑定点击和Enter事件监听可能导致Enter键失效的问题，并提供了一种在Vue应用中全局监听键盘事件的解决方案。

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

场景
在登录场景中，我们输入完账号密码以后，需要点击确定提交按钮提交信息，同样的也可以点击回车（enter）

错误的写法

 <el-button @click="onSubmit" @keyup.enter="onSubmit">登录</el-button>

这种的写法点击enter是没有效果的

正确的写法

<script>
	export default{
	// 添加监听回车事件
      created() {
        let self = this
        document.addEventListener('keyup', self.onSubmit)
      },
      methods: {
      	onSubmit:function(){
      	// 提交的内容
      	}
      }
	}
</script>