一篇文章教你实现VUE多个DIV,button绑定回车事件
更新时间：2021年10月13日 15:15:42 作者：yinxu_csdn
这篇文章主要介绍了VUE多个DIV绑定回车事件，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
目前有个需求是这样的，点击确定按钮或键盘回车时执行操作，很多地方都需要用到。
试了几种方法均不行，
首先，我在div（button也一样）上 绑定@keyup.enter方法，完全没效果，然后按照网上的方法，这样写：
<div class="btn submit" @keyup.enter="submit" @click="submit">确定（Ent）</div>
created(){
document.onkeydown = function(e) {
if(e.keyCode == 13){
console.log("调用需要执行的方法");
}
}
},
这样确实可以实现回车事件，但是这是全局的，也就是说，你在其他组件回车时也会调用此处的回车事件，此方法不行。
然后我是这样做的：
1.在确定按钮和取消按钮中间添加个<input>标签（放在中间可以当按钮的间隔，就不用写margin-left了），然后给这个input标签加上@keyup.enter事件；
<template slot="footer">
<div class="dialog-footer dis-flex">
<div class="btn cancel" @click="showDialog = false">取消（Esc）</div>
<input
type="text"
ref="inputdata"
class="hiddenIpt"
@keyup.enter="submit"
/>
<div class="btn submit" @click="submit">
确定（Ent）
</div>
</div>
</template>
2.写个监听器，监听到弹窗打开时，给input框自动聚焦（ inputdata 是 input 上用 ref 绑定的）。
watch: {
showDialog() {
if (this.showDialog) {
//this.$refs.inputdata.focus(); 错误写法
this.$nextTick(() => {//正确写法
this.$refs.inputdata.focus();
});
}
},
},
3.隐藏input框（设置宽度用来当确定按钮和取消按钮之间的间隔。）
.hiddenIpt {
width: 2rem;
opacity: 0;
}
就这样完美解决，有更好的办法，欢迎沟通交流。
总结
本篇文章就到这里了，希望能够给你带来帮助，也希望您能够多多关注脚本之家的更多内容！
相关文章
基于Vue + Axios实现全局Loading自动显示关闭效果
在vue项目中,我们通常会使用Axios来与后台进行数据交互,而当我们发起请求时,常常需要在页面上显示一个加载框（Loading）,然后等数据返回后自动将其隐藏,本文介绍了基于Vue + Axios实现全局Loading自动显示关闭效果,需要的朋友可以参考下2024-03-03
这篇文章主要为大家详细介绍了vue如何实现将后端返回的二进制流进行处理并实现下载,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下2023-12-12
这篇文章主要介绍了vue setInterval 定时器失效的解决方式，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-07-07
图形验证码是一种常见的安全措施,用于防止自动化软件（机器人）滥用网站资源,如自动提交表单,这篇文章主要介绍了在uniapp中实现图形验证码的详细步骤,文中通过代码介绍的非常详细,需要的朋友可以参考下2024-11-11
Blob 对象表示一个不可变、原始数据的类文件对象，这篇文章主要介绍了vue使用blob下载文件遇到的问题记录,需要的朋友可以参考下2024-02-02
今天小编就为大家分享一篇vue实例中data使用return包裹的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-08-08
这篇文章主要为大家详细介绍了vue自定义封装按钮组件，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-09-09
本篇文章主要介绍了关于Vue背景图打包之后访问路径错误问题的解决，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-11-11
这篇文章主要介绍了Vue项目通过network的ip地址访问注意事项及说明，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-09-09
我们在前端开发中经常看到:visible.sync这种修饰符，很多人不知道这是干什么的，在使用ElementUI的时候，里面有个弹窗el-dialog组件的时候会有用到:visible.sync，今天小编带领大家学习下:visible.sync 的作用，感兴趣的朋友一起看看吧2022-11-11
最新评论