实现Vue按钮(button)绑定回车(enter)事件

news2025/7/12 9:06:41

提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档

文章目录

  • 前言
  • 一、页面展示
  • 二、实现步骤
    • 1.在删除对话框的取消与确定按钮之间添加input输入框
    • 2.写个监听器,监听弹窗打开时,给input框自动聚焦( inputdata 是 input 上用 ref 绑定的)。
    • 3.隐藏input框
  • 总结
  • 相关文章


前言

项目中有时候会有这样的需求,当用户点击某个功能对话框(比如:删除、解绑)后,当点击确定时,希望enter键就完成操作,用来代替鼠标点击。下面就向大家介绍我使用的方法


一、页面展示

如图所示,当点击确定或者按下enter键后触发删除
在这里插入图片描述

二、实现步骤

1.在删除对话框的取消与确定按钮之间添加input输入框

代码如下:

<!-- 删除弹窗 -->
    <el-dialog
      :append-to-body="true"
      :title="deleteTitle"
      :visible.sync="dialogVisible"
      :close-on-click-modal="false"
      width="30%"
    >
      <span class="rent-span">{{ this.dialogText1 }}</span>
      <span class="rent-span2">{{ this.dialogText2 }}</span>
      <span class="rent-span">{{ this.dialogText3 }}</span>
      <span
        slot="footer"
        class="dialog-footer"
      >
        <el-button @click="dialogConfirm('cancel')">取 消</el-button>
        
        //在删除对话框的取消与确定按钮之间添加input输入框
        <input
          type="text"
          ref="inputdata"
          class="hiddenIpt"
          @keyup.enter="dialogConfirm('confirm')"
        />
        
        <el-button
          type="primary"
          @click="dialogConfirm('confirm')"
        >确 定</el-button>
      </span>
    </el-dialog>

2.写个监听器,监听弹窗打开时,给input框自动聚焦( inputdata 是 input 上用 ref 绑定的)。

代码如下:

watch: {
    dialogVisible() {
      if (this.dialogVisible) {
        //this.$refs.inputdata.focus(); 错误写法

        this.$nextTick(() => {
          //正确写法

          this.$refs.inputdata.focus();
        });
      }
    }
  },

3.隐藏input框

代码如下:

<style lang="scss" scoped>
.hiddenIpt {
  width: 1px;
  opacity: 0;
}
</style>

总结

归纳起来就大概三个步骤:

  1. 在删除对话框的取消与确定按钮之间添加input输入框
  2. 写个监听器,监听弹窗打开时,给input框自动聚焦( inputdata 是 input 上用 ref 绑定的)
  3. 隐藏input框

相关文章

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/406031.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

AI引领技术变革,自动化云平台所带来的测试工程师进阶危机~

推荐&#xff1a; Python全栈白宝书专栏&#xff0c;免费阶段订阅数量4300&#xff0c;购买任意白宝书体系化专栏可加入TFS-CLUB 私域社区。福利&#xff1a;加入社区的小伙伴们&#xff0c;除了可以获取博主所有付费专栏的阅读权限之外&#xff0c;还有机会加入 星荐官共赢计划…

微信小程序设计规范

一、宏观角度 微信小程序设计的基本原则是微信设计中心针对在微信类上线的小程序页面总结的设计指南及建议。以下设计原则都是基于对用户的尊重的基础上的&#xff0c;旨在微信生态类建立有号、高效、一致的用户体验的同时&#xff0c;最大程度顺应和支持各业务需求设计…

PHP+MySQL制作简单的用户注册登录界面(注释超详细~附源代码)

成果 网站能实现判断账户信息是否合法&#xff0c;同时附带验证码验证登录。在用户输入正确的用户名与密码后会有登录成功的弹窗&#xff0c;若输入的账户不存在&#xff0c;则会跳转至注册页面。 实现过程 项目文件分配&#xff1a; 1.首先创建login.html 实现的是用户登录…

vue-element-admin--使用体验

原文网址&#xff1a;vue-element-admin--使用体验_IT利刃出鞘的博客-CSDN博客 简介 说明 本文用示例介绍vue-element-admin的用法。 vue-element-admin 是一个后台前端解决方案&#xff0c;它基于 vue 和 element-ui实现。它使用了最新的前端技术栈&#xff0c;内置了 i18 国…

小满Vue3第三十九章(Vue开发桌面程序Electron)

建议视频教程小满Vue3&#xff08;第三十九章 electron桌面程序&#xff09;_哔哩哔哩_bilibili Electron官网Electron | Build cross-platform desktop apps with JavaScript, HTML, and CSS. 我们用的VsCode 也是 electron 开发的 electron 内置了 Chromium 和 nodeJS 其中…

【最简便方法】element-plus/element-ui走马灯配置图片以及图片自适应

首先展示官网给的模板 <template><el-carousel :interval"4000" type"card" height"200px"><el-carousel-item v-for"item in 6" :key"item"><h3 text"2xl" justify"center">…

前端实现文件下载的方法

前端实现文件下载 前端下载一般分为两种情况&#xff0c;一种是后端直接给一个文件地址&#xff0c;通过浏览器打开就可以下载&#xff0c;另外一种则需要发送请求&#xff0c;后端返回二进制流数据&#xff0c;前端解析流数据&#xff0c;生成URL&#xff0c;实现下载。 一、…

css添加边框阴影

css边框阴影如何设置&#xff1f; 语法&#xff1a; <style> box-shadow: h-shadow v-shadow blur spread color inset; </style> 取值&#xff1a; h-shadow&#xff1a;必需设置的值&#xff0c;定义水平阴影的位置。允许负值。 v-shadow&#xff1a;必需设置…

微信小程序web-view与H5 通信方式探索

本文作者为奇舞团前端开发工程师小程序简介小程序是一种全新的连接用户与服务的方式&#xff0c;它可以在微信内被便捷地获取和传播&#xff0c;同时具有出色的使用体验。需求微信小程序 H5 混合开发就是 在一个小程序中&#xff0c;采用部分小程序原生页面&#xff0c;部分通过…

Vue组件通信——父子组件通信的四种方法

引入组件 全局引入 在main.js文件中引入并注册 import ChildrenDemo from /views/components/ChildrenDemo Vue.component(ChildrenDemo,ChildrenDemo)// 第一个参数 全局组件的名字(字符串类型)&#xff0c;第二个参数&#xff1a;引入的组件名&#xff08;一般都与组件名保持…

【前端开发环境安装、配置、项目搭建全教程】

前端开发环境安装、配置、项目搭建全教程 1.Node环境安装 简单的说 Node.js 就是运行在服务端的 JavaScrip&#xff0c;基于 Chrome JavaScript 运行时建立的一个平台&#xff0c;Node.js 是一个事件驱动 I/O 服务端 JavaScript 环境&#xff0c;基于 Google 的 V8 引擎&…

uniapp页面跳转的几种方式

uniapp页面跳转的几种方式 一、uni.navigateTo 定义&#xff1a;保留当前页面&#xff0c;跳转到应用内的某个页面&#xff0c;使用uni.navigateBack可以返回到原页面。使用&#xff1a; // 1.不传参 uni.navigateTo({url:./home/index }); // 2.传参字符串 uni.navigateTo(…

Vue后台管理系统模板

推荐一些 Vue 常用后台管理系统模板 前言 Vue.js 是一个目前比较流行的前端框架&#xff0c;已经到了前端人人都会的地步&#xff0c;今天这里为大家罗列一下基于 Vue 的后端管理的框架。目前比较流行和 Vue 搭配的 UI组件 有Element-UI、iview、Bootstrap-Vue、Ant-Design-V…

项目中报错 Uncaught (in promise)

项目中报错 Uncaught (in promise) 一、问题&#xff1a;当你调用 Promise.reject() 回调的时候&#xff0c;Chrome 控制台中出现一条警告消息“Uncaught (in promise)”。 例如你简单封装axios的响应拦截器的时候&#xff1a; // 响应拦截 service.interceptors.response.u…

VUE 富文本编辑器 tinymce - - - - 对懒人 非常友好 一看就懂

首先个人觉得 tinymce这个富文本编辑器是最好用 最编辑的 &#xff0c;对懒人非常友好 的一款编辑器&#xff0c;刚 有哟个项目 &#xff0c;就遇到了 使用富文本编辑的坑 &#xff0c;因为赶项目进度自己在网上随便找了一个富文本编器&#xff0c;就是 quill 这个 坑 实在太多…

【个人网站】零基础个人网站搭建完整教程(附免费源码)

零基础个人网站搭建完整教程&#xff08;一&#xff09; 内容包括&#xff1a;前端搭建后端搭建源码网盘链接搭建服务器网站上线&#xff08;完整教程&#xff09; 从0到1搭建网站零基础个人网站搭建完整教程&#xff08;一&#xff09;前言一、前端搭建一、副页设计1.显示文字…

最新Eclipse安装教程(2022-09)

前言 现在是在校大学生&#xff0c;未来想从事大数据相关的工作&#xff0c;目前在b站学习大数据&#xff0c;写这些的目的是为了整理、巩固学过的知识&#xff0c;以后自己工作了也可以回头看看&#xff0c;如果还能够帮助到大家&#xff0c;就再好不过了&#xff01; 一、Ec…

Python Flask框架-开发简单博客-项目布局、应用设置

作者&#xff1a;Eason_LYC 悲观者预言失败&#xff0c;十言九中。 乐观者创造奇迹&#xff0c;一次即可。 一个人的价值&#xff0c;只在于他所拥有的。所以可以不学无术&#xff0c;但不能一无所有&#xff01; 技术领域&#xff1a;WEB安全、网络攻防 关注WEB安全、网络攻防…

Vue3父子组件通讯一目了然

文章目录&#x1f31f; 写在前面&#x1f31f; 父 &#x1f449; 子&#x1f31f; 子 &#x1f449; 父&#x1f31f; 写在最后&#x1f31f; 写在前面 专栏介绍&#xff1a; 凉哥作为 Vue 的忠实 粉丝输出过大量的 Vue 文章&#xff0c;应粉丝要求开始更新 Vue3 的相关技术文…

前端直接生成GIF动态图实践

前言去年在博客中发了两篇关于GIF动态生成的博客&#xff0c;GIF图像动态生成-JAVA后台生成和基于FFmpeg的Java视频Mp4转GIF初探&#xff0c;在这两篇博客中都是采用JAVA语言在后台进行转换。使用JAVA的同学经过自己的改造和开发也可以应用在项目上。前段时间有朋友私下问&…