vue中在弹框中使用form表单,取消默认的回车提交效果-刷新页面

前言:

        vue项目中使用dialog弹框的时候,如果在弹框上使用form表单,但是我们只是使用他的input框,不需要它默认的提交功能的时候,会出现input聚焦,回车刷新页面,是因为他触发了默认的form提交方法。解决办法,可以js动态禁止回车,也可以去掉默认的提交。

优化该处功能方法:

1、动态给他添加回车禁止事件

打开弹框时挂载,关闭弹框时候取消

document.addEventListener('keydown', (event:Event)=>keyDownFun(event));// 关闭修改名字弹框
const closeEditNameDialog = ()=>{document.removeEventListener('keydown', (event:Event)=>keyDownFun(event));
}// 键盘事件-禁止回车
const keyDownFun = (event:any) =>{if (event.key === 'Enter') {event.preventDefault();}
}弹框上:
onClose={closeEditNameDialog}
@close="closeEditNameDialog"

2、取消默认的form表达的提交方法

el-form上
onSubmit={(e: Event)=>e.preventDefault()}
@submit = ""

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

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

相关文章

Excel VSTO开发8 -相关控件

版权声明:本文为博主原创文章,转载请在显著位置标明本文出处以及作者网名,未经作者允许不得用于商业目的。 8 相关控件 在VSTO开发中,Ribbon(或称为Ribbon UI)是指Office应用程序中的那个位于顶部的带有选…

C++零碎记录(一)

1. 面向对象三大特性 ① C面向对象的三大特性为:封装、继承、多态。 ② C认为万事万物皆为对象,对象上有其属性和行为。 ③ 例如: 1. 人可以作为对象,属性有姓名、年龄、身高、体重......行为有走、跑、跳、吃饭、唱歌.... 2. …

End-to-end 3D Human Pose Estimation with Transformer

基于Transformer的端到端三维人体姿态估计 摘要 基于Transformer的架构已经成为自然语言处理中的常见选择,并且现在正在计算机视觉任务中实现SOTA性能,例如图像分类,对象检测。然而,卷积方法在3D人体姿态估计的许多方法中仍然保…

el-table自适应列宽实现

【背景小记】 el-table的el-table-column如果不指定width的话,会自动设定一个宽度,表格内容会自动换行,对强迫症用户来说非常不友好,为了追求完美用户体验,所以这里需要实现两个效果: 1. 强制表格内容不换…

vue项目一个页面包含多个时间选择器的处理方案

描述:vue项目中如果在一个页面使用多个时间选择器组件时,不同的时间选择器需要分别分开工作 解决方案一 原本是想直接每一个时间选择器都安排一套相对独立的维生系统,但是到后面发现繁琐至极,而且报错,果断放弃&#…

JSP SSM 成果展示系统myeclipse开发mysql数据库springMVC模式java编程计算机网页设计

一、源码特点 JSP SSM 冬奥建设成果展示系统是一套完善的web设计系统(系统采用SSM框架进行设计开发,springspringMVCmybatis),对理解JSP java编程开发语言有帮助,系统具有完整的 源代码和数据库,系统主…

PHP教学质量评估系统Dreamweaver开发mysql数据库web结构php编程计算机网页代码

一、源码特点 PHP教学质量评估系统是一套完善的web设计系统,对理解php编程开发语言有帮助,系统具有完整的源代码和数据库,系统主要采用B/S模式开发。 代码 https://download.csdn.net/download/qq_41221322/88301983 论文 https://down…

Pinyin4j介绍和简单使用

前言 Pinyin4j是一个Java库,用于将汉字转换为拼音。它是由中国清华大学的Tsinghua University和中国科学院计算技术研究所的研究人员开发的。Pinyin4j可以用于Java应用程序中,以便在需要时将汉字转换为拼音。例如,它可以用于中文输入法、文本…

【牛客刷题】反转固定区间链表、每k个节点一组反转

链表内指定区间反转_牛客题霸_牛客网 ListNode* reverseList(ListNode* head, ListNode* tail) {ListNode* pre nullptr;ListNode* cur head;while (cur ! tail) { 最后cur就是tailListNode* temp cur->next;cur->next pre;pre cur;cur temp;}return pre;}ListNode…

ReactiveUI MVVM框架(1)-Collections

ReactiveUI MVVM框架(1)-Collections ReactiveUI使用动态数据(DynamicData)用于集合的操作。 当对动态数据集合进行更改时,会产生更改通知,通知表示为ChangeSet,里面包含了更改信息&#xff0…

AR工业远程巡查系统:实时监控设备状态,及时发现潜在问题

随着工业4.0的到来,先进的技术和创新的解决方案正在改变着工业生产的方式。其中,增强现实(AR)技术带来的工业巡检系统就是一个典型的例子。这种系统通过在现实世界中添加虚拟信息,使得操作人员能够更有效地进行检查和维…

入门ElasticSearch :为什么选择ES作为搜索引擎?

介绍 随着数据量的不断增长,搜索和分析大规模数据集变得越来越重要。传统数据库在面对这种需求时往往表现不佳,这时候就需要一种专门用于搜索和分析的引擎。ElasticSearch (简称ES)就是这样一款强大的搜索引擎,它具有许…

Java设计模式之建造者模式详解(Builder Pattern)

在日常的开发工作中,我们常常需要创建一些复杂的对象。这些对象可能包含许多不同的属性,并且这些属性的初始化过程可能相当复杂。在这种情况下,建造者模式是一种非常有用的设计模式,因为它允许我们分步骤地创建复杂的对象。 概念和…

软件概要设计-架构真题(二十五)

软件概要设计包括软件设计的结构、确定系统功能模块及其相互关系,主要采用()描述程序的结构。(2018年) 程序流程图、PAD图和伪代码模块结构图、数据流图和盒图模块结构图、层次图和HIPO图程序流程图、数据流图和层次图…

2023 IntelliJ IDEA下载、安装教程, 附详细图解

文章目录 下载与安装IDEA推荐阅读 下载与安装IDEA 首先先到官网下载最新版的IntelliJ IDEA, 下载后傻瓜式安装就好了 官网下载地址:https://www.jetbrains.com/ 1、下载完后在本地找到该文件,双击运行 idea 安装程序 2、点击 Next 3、选择安装路径&…

UMA 2 - Unity Multipurpose Avatar☀️五.如何使用别人的Recipe和创建自己的服饰Recipe

文章目录 🟥 使用别人的Recipe1️⃣ 导入UMA资源效果展示2️⃣ 更新Library3️⃣ 试一下吧🟧 创建自己的服饰Recipe1️⃣ 创建自己的服饰Recipe2️⃣ 选择应用到的Base Recipe3️⃣ 指定显示名 / 佩戴位置 / 隐藏部位4️⃣ 给该服饰Recipe指定Slot / Overlay🚩 赋予Slot�…

Nginx 解析漏洞

文章目录 Nginx 解析漏洞1. 空字节漏洞1.1 漏洞描述1.2 漏洞复现1.3 修复方案 2. Nginx 解析漏洞复现2.1 漏洞描述2.2 漏洞复现2.3 获取GetShell2.4 修复方案 3. Nginx 文件名逻辑漏洞3.1 漏洞描述3.2 漏洞原理3.3 漏洞复现3.3.1 环境启动3.3.2 漏洞验证 3.4 漏洞利用3.5 修复方…

【C++杂货铺】探索stack和queue的底层实现

文章目录 一、stack的介绍和使用1.1 stack的介绍1.2 stack的使用1.2.1 最小栈1.2.2 栈的压入、弹出序列1.2.3 逆波兰表达式求值1.2.4 用栈实现队列 二、queue的介绍和使用2.1 queue的介绍2.2 queue的使用2.2.1 二叉树的层序遍历 三、模拟实现3.1 stack模拟实现3.2 queue模拟实现…

CUDA小白 - NPP(4) 图像处理 Data Exchange and Initialization(1)

cuda小白 原始API链接 NPP GPU架构近些年也有不少的变化,具体的可以参考别的博主的介绍,都比较详细。还有一些cuda中的专有名词的含义,可以参考《详解CUDA的Context、Stream、Warp、SM、SP、Kernel、Block、Grid》 常见的NppStatus&#xf…

kafka 3.5 主题分区的Follower创建Fetcher线程从Leader拉取数据源码

Kakfa集群有主题,每一个主题下又有很多分区,为了保证防止丢失数据,在分区下分Leader副本和Follower副本,而kafka的某个分区的Leader和Follower数据如何同步呢?下面就是讲解的这个 首先要知道,Follower的数据…