一篇文章教你实现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 配置代理详情，文章围绕主题的相关资料展开详细内容介绍，具有一定的参考价值，需要的小伙伴可以参考一下，希望对你的学习有所帮助2022-04-04
Vue是一套构建用户界面的框架， 开发只需要关注视图层， 它不仅易于上手，还便于与第三方库或既有项目的整合。这篇文章主要介绍了vue中使用elementUI组件手动上传图片,需要的朋友可以参考下2019-12-12
在本篇文章里小编给大家整理的是一篇关于Vue3使用Proxy实现数据监听的原因分析内容，有需要的朋友们可以跟着学习参考下。2021-11-11
这篇文章主要介绍了Vuex中State的使用方法,Vuex 使用单一状态树,用一个对象就包含了全部的应用层级状态,这也意味着,每个应用将仅仅包含一个 store 实例,需要的朋友可以参考下2023-11-11
vue使用echarts时created里拿到的数据无法渲染的解决
这篇文章主要介绍了vue使用echarts时created里拿到的数据无法渲染的解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-03-03
这篇文章主要介绍了Vue+Element自定义纵向表格表头教程，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-10-10
本篇文章主要介绍了Vue下滚动到页面底部无限加载数据的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-04-04
这篇文章主要介绍了使用vue 国际化i18n 多实现语言切换功能，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值 ,需要的朋友可以参考下2018-10-10
目前开发大型应用，测试是一个非常重要的环节，而在 Vue 项目中做单元测试可以用 Jest，本文主要介绍了Vue-Jest 自动化测试，感兴趣的可以了解一下2021-07-07
使用两种方式调用本地json文件(基于Vue-cli3脚手架)
这篇文章主要介绍了使用两种方式调用本地json文件(基于Vue-cli3脚手架),具有很好的参考价值,希望对大家有所帮助,2023-10-10
最新评论