Element的Message弹窗重复弹出问题解决

目录
  • 一. 使用
  • 二. 解决消息弹窗重复显示

一. 使用

在 Vue 中使用 element 的 message 组件

在 Vue 文件中使用

this.$message({
  message: "提示信息",
  type: "success"
})

在 js 文件中使用

import ElementUI from 'element-ui';

ElementUI.Message({
  message: '提示信息',
  type: 'warning'
});

二. 解决消息弹窗重复显示

// message.js
/**
 * @Description: 重写message挂载，实现 Class 的私有属性
 * @param { String } options => 消息内容
 * @param { Boolean } single => 是否只显示一个
 */
import { Message } from 'element-ui';

const showMessage = Symbol('showMessage');

class DonMessage {
  success (options, single = false) {
    this[showMessage]('success', options, single);
  }
  warning (options, single = false) {
    this[showMessage]('warning', options, single);
  }
  info (options, single = false) {
    this[showMessage]('info', options, single);
  }
  error (options, single = true) {
    this[showMessage]('error', options, single);
  }

  [showMessage] (type, options, single) {
    if (single) {
      // 判断是否已存在Message
      if (document.getElementsByClassName('el-message--error').length === 0) {
        Message[type](options);
      }
    } else {
      Message[type](options);
    }
  }
}

// 默认导出 私有 Message 组件
export default new DonMessage();

在有需要的地方引入

import DonMessage from '@/message'

js 文件中直接使用

DonMessage.warning('请登录')

挂载到vue原型上

// main.js
Vue.prototype.$message = DonMessage

// vue文件中调用
this.$message.warning("请登录")

到此这篇关于Element的Message弹窗重复弹出问题解决的文章就介绍到这了,更多相关Element的Message弹窗重复弹出内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • ElementUI之Message功能拓展详解

    在最近项目开发中,接口错误信息是在拦截器统一处理,在一次产品大大验收过程中,由于服务器没有重启完成,导致前端弹出一推错误提示语,产品大大对于提示语的交互效果提出了一系列的建议.由于项目使用了ElementUI框架,加上本人喜欢投(xin)机(shou)取(nian)巧(lai),于是去查看ElementUI Message的源码,根据实际需求自定义了Message功能. 场景描述 场景一:限制页面同时展示消息提示语的最大数量(优先展示后插入的提示语) 场景二:根据不同情况可以优先显示新/旧消息提

  • 仿照Element-ui实现一个简易的$message方法

    前言 在需要对用户进行提示时,有时会遇到这种场景:使用模态框提示太过硬核,使用toast提示又太轻了,这时候可以选择使用页面顶部滑下的消息提示.本文仿照element-ui的实现一个类似$message的方法. 思路梳理 首先我们来看下element-ui中消息提示的效果是怎么样的,找些思路. 从图中我们可以看消息提示是可以同时显示多条的,并且定位看起来都是fixed,居中展示,我们自然可以想到使用数组来存储这些消息的信息,并且根据每一条提示消息的显示隐藏更改每一项的top值,然后就是加一些动画

  • Element MessageBox弹框的具体使用

    组件-弹框 消息提示 <template> <el-button type="text" @click="open">点击打开 Message Box</el-button> </template> <script> export default { methods: { open() { this.$alert('这是一段内容', '标题名称', { confirmButtonText: '确定', ca

  • vue自定义插件封装，实现简易的elementUi的Message和MessageBox的示例

    这次封装基于vuecli3 + typescript实现,javascript也是同理,没有区别: 自定义插件有助于我们可以将一些页面交互封装并在js或ts文件中引入实现,而不是只在 .vue文件. 1.实现toast插件封装(类似简易版的elementUi的message) 先书写一个toast组件 <template> <div ref="toastRef" class="toastMessageBox">{{ message }}<

  • Element的Message弹窗重复弹出问题解决

    Element的Message弹窗重复弹出问题解决

    目录 一. 使用 二. 解决消息弹窗重复显示 一. 使用 在 Vue 中使用 element 的 message 组件 在 Vue 文件中使用 this.$message({ message: "提示信息", type: "success" }) 在 js 文件中使用 import ElementUI from 'element-ui'; ElementUI.Message({ message: '提示信息', type: 'warning' }); 二. 解决消息

  • JS弹窗 JS弹出DIV并使整个页面背景变暗功能的实现代码

    1.首先写一个遮罩层div,然后再写一个弹窗的div <!-- 遮罩层 --> <div id="cover" style="background: #000; position: absolute; left: 0px; top: 0px; width: 100%; filter: alpha(opacity=30); opacity: 0.3; display: none; z-index: 2 "> </div> <!

  • JS使用遮罩实现点击某区域以外时弹窗的弹出与关闭功能示例

    本文实例讲述了JS使用遮罩实现点击某区域以外时弹窗的弹出与关闭功能.分享给大家供大家参考,具体如下: HTML部分: <div id="div">点击除开div的区域可以弹出弹窗</div> <div id="cover"></div> <div id="box">点击除开div和弹窗的区域可以关闭弹窗</div> CSS部分: #div{ /*设置z-index属性必须设置

  • 关于使用 jBox 对话框的提交不能弹出问题解决方法

    jBox 是个不错的对话框组件. 在 ASP.NET Form 中使用 jBox 的时候,在按钮注册的客户端点击事件中,会发现不能弹出对话框问题. 表现为页面一闪就提交了,导致对话框一闪而过,甚至根本看不到.导致模式对话框失败. 首先,按钮会有默认处理,对于普通的 ASP.NET 按钮来说,会导致表单的提交,提交表单导致了页面的刷新.所以,为了不提交表单,就需要阻止按钮默认的行为,这可以通过下面的代码实现. 复制代码 代码如下: function stopDefault( e ) { // Pr

  • 解决VantUI popup 弹窗不弹出或无蒙层的问题

    背景 ####组件PopupTime.vue 把vant官网的popup+时间选择器抽成组件: popup1show: true 即弹窗显示 <template> <div class="PopupTime"> <van-popup v-model="popup1show" position="bottom" :overlay="true" @click-overlay="clickOv

  • vue如何通过点击事件弹出弹窗页面详解

    目录 步骤一 步骤二 总结 步骤一 创建一个弹窗页面,我们给该页面命名为dialogComponent,弹窗页面中要设置以下内容: <template> <!--1.首先,弹窗页面中要有el-dialog组件即弹窗组件,我们把弹窗中的内容放在el-dialog组件中--> <!--2.设置:visible.sync属性,动态绑定一个布尔值,通过这个属性来控制弹窗是否弹出--> <el-dialog title="弹窗" :visible.syn

  • layer弹出层框架alert与msg详解

    layer弹出层框架alert与msg详解

    layer至今仍作为layui的代表作,她的受众广泛并非偶然,而是这五年多的坚持,不断完善和维护.不断建设和提升社区服务,使得猿们纷纷自发传播,乃至于成为今天的Layui最强劲的源动力.目前,layer已成为国内最多人使用的web弹层组件,GitHub自然Stars3000+,官网累计下载量达30w+,大概有20万Web平台正在使用layer. 在贴出代码 layer.alert('见到你真的很高兴', {icon: 6}); 这是一个最简单的弹出层,可根据icon配置左边的图标 通常情况下,除

  • EasyUI实现第二层弹出框的方法

    这是网友在EasyUI拓展时的代码. 可以根据实际需要自行修改. $.modalDialog2.handler 这个handler代表弹出的dialog句柄  $.modalDialog2.xxx 这个xxx是可以自己定义名称,主要用在弹窗关闭时,刷新某些对象的操作,可以将xxx这个对象预定义好 复制代码 代码如下: $.modalDialogTwo = function(options) {  if ($.modalDialogTwo.handler == undefined) {// 避免重

  • javascript实现弹出层效果

    javascript实现弹出层效果

    弹出层和弹窗相似但是并不相同:弹窗和弹出层都是由用户触发的显示提示信息的弹出面板:但是弹窗只是显示一些信息,没有太多的复杂的交互事件:而弹层类似一个整个页面,可以实现页面的所有功能: 现在前端弹层使用的很频繁,如支付宝支付弹层等-所以掌握弹层是一个很重要的技能.如果只是简单的隐藏和切换,当然就不必说,我要说的html+animate+es6实现弹层: html弹层结构: <main class="main"> <header class="head flex

  • layui弹出层效果实现代码

    layui弹出层效果实现代码

    本文实例为大家分享了layui弹出层的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>弹出层</title> <link rel="stylesheet" href="layui/css/layui.css" media="all"> &

随机推荐