Vue 中多个 MessageBox 弹框被覆盖的问题

最新推荐文章于 2024-07-11 22:38:09 发布

weixin_54362826

最新推荐文章于 2024-07-11 22:38:09 发布

阅读量1.6k

点赞数

分类专栏： ElementUI 文章标签： elementui

本文链接：https://blog.csdn.net/weixin_54362826/article/details/119533455

版权

本文针对Vue中ElementUI MessageBox弹框被覆盖的问题进行分析，提出将MessageBox封装成插件的方法，以确保修改密码弹框独立于ElementUI MessageBox，避免弹框排队现象。详细介绍了组件封装过程及代码实现。

摘要由CSDN通过智能技术生成

前情

页面一打开就有一个提醒修改密码的弹框,如果这时候再有其他 messageBox 弹框的时候就会被覆盖,形成多个弹框排队等着处理的效果,第一个弹框永远在最前面,不能及时处理消息
在这里插入图片描述

分析

ElementUI 的组件是挂载在 Vue 上的,而全局的 Vue 实例只有一个,所以只能一个一个地弹出 MessageBox

解决方法: 将 MessageBox 封装成一个插件,修改密码的弹框使用插件,其他地方正常使用 ElementUI 的 MessageBox

最终效果

代码

MsgBox.vue

<template>
	<div v-show="visible" class="message-box">
		<div class="box">
            <div class="title">
                <div class="box-title">{
   {
   title}}</div>
                <span class="cancel" @click="clickCancel"><svg-icon class="Msgcancel" icon-class="Msgcancel"></svg-icon></span>
            </div>
            <div class="content">
                <span class="icon"><svg-icon icon-class="Msgalarm" class="Msgalarm"></svg-icon></span>
                <div class="box-content">{
   {
   content}}</div>
            </div>
			<div class="box-btns">
				<button @click="clickConfirm" class="btn-confirm"