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

 更新时间:2021-10-13 16:05:33   作者:佚名   我要评论(0)

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

试了几种方法均不行,
首先,我在div(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;
  }

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

总结

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

您可能感兴趣的文章:
  • vue实现给div绑定keyup的enter事件
  • vue动态绑定图标的完整步骤
  • vue实现双向数据绑定
  • Vue中Class和Style实现v-bind绑定的几种用法
  • vue实现简单数据双向绑定

相关文章

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

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

    目前有个需求是这样的,点击确定按钮或键盘回车时执行操作,很多地方都需要用到。 试了几种方法均不行, 首先,我在div(button也一样)上
    2021-10-13
  • MySQL数据库必备之条件查询语句

    MySQL数据库必备之条件查询语句

    目录1、基本语法2、按条件表达式筛选3、按逻辑表达式筛选4、模糊查询5、安全等于1、基本语法 SELECT 查询列表 FROM 表名 WHERE 筛选表达
    2021-10-13
  • 基于@JsonSerialize和@JsonInclude注解使用方法

    基于@JsonSerialize和@JsonInclude注解使用方法

    目录@JsonSerialize和@JsonInclude注解@JsonSerialize使用步骤@JsonIncludeJSON @JsonSerialize 弃用问题解决方案@JsonSerialize和@JsonIncl
    2021-10-13
  • python爬虫实战steam加密逆向RSA登录解析

    python爬虫实战steam加密逆向RSA登录解析

    目录采集目标工具准备项目思路解析采集目标 网址:steam 工具准备 开发工具:pycharm 开发环境:python3.7, Windows10 使用工具包:reques
    2021-10-13
  • 中石化中石油充值API接口

    中石化中石油充值API接口

    话费充值接口文档接口版本:1.0 ―、引言1.1 文档概述本文档提供话费充值接口规范说明,提供一整套的完整的接入示例(http 接口)供商户参 考,可以帮助商户开发人员快速完成
    2021-10-09
  • 中石化中石油充值API接口

    中石化中石油充值API接口

    话费充值接口文档接口版本:1.0 ―、引言1.1 文档概述本文档提供话费充值接口规范说明,提供一整套的完整的接入示例(http 接口)供商户参 考,可以帮助商户开发人员快速完成
    2021-10-09
  • 三网话费API接口,稳定可靠,不卡单

    三网话费API接口,稳定可靠,不卡单

    话费充值接口文档接口版本:1.0 ―、引言1.1 文档概述本文档提供话费充值接口规范说明,提供一整套的完整的接入示例(http 接口)供商户参 考,可以帮助商户开发人员快速完成
    2021-10-09
  • 三网话费充值api,油卡充值api(中石化中石油)

    三网话费充值api,油卡充值api(中石化中石油)

    话费充值接口文档接口版本:1.0 ―、引言1.1 文档概述本文档提供话费充值接口规范说明,提供一整套的完整的接入示例(http 接口)供商户参 考,可以帮助商户开发人员快速完成
    2021-10-09
  • perl 简明教程 perl教程集合

    perl 简明教程 perl教程集合

    参考:http://shouce.jb51.net/perl5/ 网站环境配置:https://www.jb51.net/article/74005.htm Perl的基本语法 https://www.jb51.net/shou
    2021-10-09
  • Javascript实现登录框拖拽效果

    Javascript实现登录框拖拽效果

    本文实例为大家分享了Javascript实现登录框拖拽效果的具体代码,供大家参考,具体内容如下 需求分析 1、点击弹出登录框 2、在登录框的特定区
    2021-10-04

最新评论