快捷導(dǎo)航

Element的Message彈窗重復(fù)彈出問題解決

更新時(shí)間：2021年09月06日 10:49:15 作者：JamisonLee

本文主要介紹了Element的Message彈窗重復(fù)彈出，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

一. 使用

在 Vue 中使用 element 的 message 組件

在 Vue 文件中使用

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

在 js 文件中使用

import ElementUI from 'element-ui';

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

二. 解決消息彈窗重復(fù)顯示

// message.js
/**
 * @Description: 重寫message掛載，實(shí)現(xiàn) Class 的私有屬性
 * @param { String } options => 消息內(nèi)容
 * @param { Boolean } single => 是否只顯示一個(gè)
 */
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);
    }
  }
}

// 默認(rèn)導(dǎo)出 私有 Message 組件
export default new DonMessage();

在有需要的地方引入

import DonMessage from '@/message'

js 文件中直接使用

DonMessage.warning('請(qǐng)登錄')

掛載到vue原型上

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

// vue文件中調(diào)用
this.$message.warning("請(qǐng)登錄")

到此這篇關(guān)于Element的Message彈窗重復(fù)彈出問題解決的文章就介紹到這了,更多相關(guān)Element的Message彈窗重復(fù)彈出內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

相關(guān)文章

vue實(shí)現(xiàn)移動(dòng)端彈出鍵盤功能(防止頁面fixed布局錯(cuò)亂)
這篇文章主要介紹了vue?解決移動(dòng)端彈出鍵盤導(dǎo)致頁面fixed布局錯(cuò)亂的問題,通過實(shí)例代碼給大家分享解決方案，對(duì)vue?移動(dòng)端彈出鍵盤相關(guān)知識(shí)感興趣的朋友一起看看吧
2022-04-04
vscode中vue代碼提示與補(bǔ)全沒反應(yīng)解決(vetur問題)
這篇文章主要給大家介紹了關(guān)于vscode中vue代碼提示與補(bǔ)全沒反應(yīng)解決(vetur問題)的相關(guān)資料,文中通過圖文將解決的方法介紹的非常詳細(xì),需要的朋友可以參考下
2023-03-03
Vue動(dòng)態(tài)生成表格的行和列
這篇文章主要為大家詳細(xì)介紹了Vue動(dòng)態(tài)生成表格的行和列，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2019-07-07
一文詳解vue2的diff算法流程
本篇文章將會(huì)嘗試從算法的角度主要聊一聊vue2的diff策略,幫助讀者朋友在遇到相關(guān)的面試題時(shí)可以和面試官談笑風(fēng)生,文中有相關(guān)的圖解和代碼示例,感興趣的同學(xué)跟著小編一起來看看吧
2023-08-08
vue3+Naive?UI數(shù)據(jù)表格基本使用方式詳解
這篇文章主要給大家介紹了關(guān)于vue3+Naive?UI數(shù)據(jù)表格基本使用方式詳?shù)南嚓P(guān)資料,Naive?UI是一個(gè)基于Typescript開發(fā)的針對(duì)Vue3開發(fā)的UI組件庫(kù),由TuSimple(圖森未來)公司開發(fā)并開源,需要的朋友可以參考下
2023-08-08
vue3自定義組件之v-model實(shí)現(xiàn)父子組件雙向綁定
這篇文章主要介紹了vue3自定義組件之v-model實(shí)現(xiàn)父子組件雙向綁定方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-08-08
iview給radio按鈕組件加點(diǎn)擊事件的實(shí)例
下面小編就為大家?guī)硪黄猧view給radio按鈕組件加點(diǎn)擊事件的實(shí)例。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2017-09-09
Vue?結(jié)合Sortablejs實(shí)現(xiàn)table行排序功能
在一個(gè)列表展示頁面上，使用了表格組件，原有組件本身不支持拖拽功能，需求要求在列表的基礎(chǔ)上支持行拖拽排序，因此引入了www.sortablejs.com插件，接下來通過本文給大家講解Vue?結(jié)合Sortablejs實(shí)現(xiàn)table行排序功能,需要的朋友可以參考下
2022-10-10
詳解Vue爬坑之vuex初識(shí)
本篇文章主要介紹了詳解Vue爬坑之vuex初識(shí) ，Vue 的狀態(tài)管理工具 Vuex可以解決大型項(xiàng)目中子組件之間傳遞數(shù)據(jù)，有興趣的可以了解下
2017-06-06
vue3項(xiàng)目打包與上線詳細(xì)圖文教程
這篇文章主要給大家介紹了關(guān)于vue3項(xiàng)目打包與上線的相關(guān)資料,在項(xiàng)目完成得差不多得時(shí)候,就可以開始打包部署了,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下
2023-12-12