首页 > 其他分享 >element-ui MessageBox.confirm 取消自动聚焦

element-ui MessageBox.confirm 取消自动聚焦

时间:2024-11-07 10:46:46浏览次数:3  
标签:... MessageBox confirm args element ui

在使用 element-ui 的 MessageBox.confirm 方法时,你可能注意到一个细节:当确认框弹出时,确认按钮会自动获得焦点。虽然这种设计在大多数情况下是合理的,但有时我们可能不希望出现这种自动聚焦的行为。

解决方案

我们可以通过简单的包装来解决这个问题。以下是实现代码:

TypeScript

import { MessageBox } from 'element-ui';
import { ElMessageBoxOptions } from 'element-ui/types/message-box'

export const MessageBoxConfirmWrapper = (...args: [string, string, ElMessageBoxOptions?]) => {
    setTimeout(() => {
        (document.activeElement as HTMLElement)?.blur();
    }, 0);
    return MessageBox.confirm(...args);
}

JavaScript

import { MessageBox } from 'element-ui';

export const MessageBoxConfirmWrapper = (...args) => {
    setTimeout(() => {
        document.activeElement?.blur();
    }, 0);
    return MessageBox.confirm(...args);
}

使用方法

main.tsmain.js注册完element-ui后,手动进行覆盖

Vue.use(ElementUI, { size: "medium" });

// 覆盖element-ui的MessageBox.confirm方法
Vue.prototype.$confirm = MessageBoxConfirmWrapper;

原理解释

这个解决方案利用了 JavaScript 的事件循环机制。通过 setTimeout 将移除焦点的操作放到下一个事件循环中执行,可以确保在 MessageBox 完成渲染并设置焦点之后再移除焦点。

标签:...,MessageBox,confirm,args,element,ui
From: https://www.cnblogs.com/azoux/p/18531730

相关文章

  • RabbitMQ如何保证发送的消息可靠(RabbitMQ的Confirm模式和2.Return模式)
    RabbitMQ如何保证发送的消息可靠(RabbitMQ的Confirm模式和2.Return模式)1、RabbitMQ消息Confirm模式(保证从生产者到交换机的消息可靠)1.1、Confirm模式简介1.2、具体代码实现1.2.1、application.yml开启确认模式1.2.2、生产者方式1:实现RabbitTemplate.ConfirmCallback生产......
  • 前端自学(5)-使用Vue组件库element书写前端代码
    element是饿了么团队研发的,一套为开发者,设计师和产品经理提供的基于Vue2.0的桌面端组件库。官网:Element-网站快速成型工具有了element组件库,开发人员就可以通过CV(复制粘贴。)制作出精美的前端页面。下面是一个简单页面的示例,我将为大家演示如何制作一个这样的页面。1.首......
  • 在 Vue 2 项目中使用 Element UI
    在Vue2项目中使用ElementUI本实验手册将指导你如何在Vue2项目中使用ElementUI组件库,搭建一个简单的页面。一、介绍ElementUIElementUI(Element-网站快速成型工具)是一套基于Vue2.0的桌面端组件库,提供了丰富的、可复用的UI组件,可以帮助开发者快速构建美观、......
  • SpringBoot3+Vue3+ElementPlus通用权限后台系统 | 小蚂蚁云
     项目介绍基于SpringBoot3、SpringSecurity、MybatisPlus、Vue3、TypeScript、Vite、ElementPlus、MySQL等技术栈实现的单体前后端分离后台管理系统;后端基于Java语言采用SpringBoot3、SpringSecurity、MybatisPlus、MySQL等主流技术栈,前端基于Vue3、TypeScript、Vite等技术栈......
  • SpringBoot3+Vue3+ElementPlus搭建后台系统脚手架 | 小蚂蚁云
     项目介绍基于SpringBoot3、SpringSecurity、MybatisPlus、Vue3、TypeScript、Vite、ElementPlus、MySQL等技术栈实现的单体前后端分离后台管理系统;后端基于Java语言采用SpringBoot3、SpringSecurity、MybatisPlus、MySQL等主流技术栈,前端基于Vue3、TypeScript、Vite等技术栈......
  • 温故知新,基于播客形式学习英语之EnglishPod 365, Elementary初级C集合Ⅱ(音频、原文、
    未经作者授权同意,请勿随意转载!!!(https://www.cnblogs.com/taylorshi/p/18498699)简介Enishpod是一家公司叫做PraxisLanguage推出的收费讲座,相比较ESLPod,EnishPod为常速。Enishpod极具趣味性,两位主持人Marco和Amira的讲解很生动幽默,完全有别于新概念类型听力的乏味。同时,Enis......
  • Vue3+Elementplus+Univer-Sheet实现在线excel及其需要注意的点
    1、准备项目环境Vue3自行准备node.js环境2、ElementPlus官网官网安装教程自行参照官网3、Univer插件官网1)官网网址2)开始直接点击GetStarted侧边栏点击  后面直接按照教程走即可 4、配置插件需要注意如果上述插件包已经下载并成功引入vue......
  • springboot 整合 activiti 搭配 vue3 element-plus activiti-modeler bpmn-js
    springboot整合activiti搭配vue3element-plusactiviti-modelerbpmn-js配合使用ElementPlus+Vue3(idea开发,需要安装lombok插件)相关依赖版本后台:依赖版本spring-boot2.7.18knife4j-spring-boot-starter3.0.3pagehelper-spring-boot-starter1.3.0......
  • element-plus自定义表格根据内容合并行
    用el-table组件时,对于自定义表头,多级表头的使用在官网都有详细介绍。 在这次项目中用到了,自定义合并行,根据行内容相同的合并。前提是两个行要挨着。先看效果: 实现原理:原理很简单,重点在于组件span-method这个属性, 这个属性方法会一个单元格一个单元格去渲染,参......
  • elementui 动态的合并行;
    flitterData(arr,name){   letspanOneArr=[]   letconcatOne=0   arr.forEach((item,index)=>{    if(index===0){     spanOneArr.push(1)    }else{     if(item[name]===arr[index-1][n......