纯净、安全、绿色的下载网站

首页|软件分类|下载排行|最新软件|IT学院

当前位置:首页IT学院IT技术

VUE多个DIV,button绑定回车 一篇文章教你实现VUE多个DIV,button绑定回车事件

yinxu_csdn   2021-10-13 我要评论
想了解一篇文章教你实现VUE多个DIV,button绑定回车事件的相关内容吗yinxu_csdn在本文为您仔细讲解VUE多个DIV,button绑定回车的相关知识和一些Code实例欢迎阅读和指正我们先划重点:VUE,DIV,VUE,button,绑定回车下面大家一起来学习吧。

目前有个需求是这样的点击确定按钮或键盘回车时执行操作很多地方都需要用到。

试了几种方法均不行

首先我在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;
  }

就这样完美解决有更好的办法欢迎沟通交流。

总结

本篇文章就到这里了希望能够给你带来帮助也希望您能够多多关注的更多内容!


相关文章

猜您喜欢

网友评论

Copyright 2020 www.Shellfishsoft.com 【贝软下载站】 版权所有 软件发布

声明:所有软件和文章来自软件开发商或者作者 如有异议 请与本站联系 点此查看联系方式