element标签弹窗_在vue中使用Element的message组件,解决弹窗重复弹出

在vue中使用Element的message组件

在vue文件中使用

this.$message({

message: "提示信息",

type: "success"

})

在js文件中使用

import ElementUI from 'element-ui';

ElementUI.Message({

message: '提示信息',

type: 'warning'

});

解决消息弹窗重复显示

// message.js

import { Message } from 'element-ui'

const showMessage = Symbol('showMessage')

class DonMessage {

success (options, single = true) {

this[showMessage]('success', options, single)

}

warning (options, single = true) {

this[showMessage]('warning', options, single)

}

info (options, single = true) {

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').length === 0) {

Message[type](options)

}

} else {

Message[type](options)

}

}

}

export default new DonMessage()

在有需要的地方引入

import DonMessage from '@/message'

js文件中直接使用

DonMessage.warning('请登录')

挂载到vue原型上

// main.js

Vue.prototype.$message = DonMessage

// vue文件中调用

this.$message.warning("请登录")