You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 

94 lines
2.0 KiB

import Vue from 'vue'
import GuipMessage from './GuipMessage.vue'
// 默认图标配置
const defaultIcons = {
success: 'icon-success', // 替换为你的图标类名
info: 'icon-info',
warning: 'icon-warning',
error: 'icon-error'
}
// 默认图片配置
const defaultImages = {
success: require('@/assets/message_Success.png'),
info: require('@/assets/message_Warning.png'),
warning: require('@/assets/message_Warning.png'),
error: require('@/assets/message_error.png')
}
const MessageConstructor = Vue.extend(GuipMessage)
// let messageInstance = null
let messageQueue = []
function showMessage(options) {
if (typeof options === 'string') {
options = {
message: options
}
}
// 合并默认配置
const config = {
type: 'info',
duration: 3000,
position: 'top-center',
showImage: true,
...options
}
// 设置图标或图片
if (config.showImage) {
config.imageUrl = options.imageUrl || defaultImages[config.type]
} else {
config.iconClass = options.iconClass || defaultIcons[config.type]
}
// 创建实例
const instance = new MessageConstructor({
propsData: config
})
// 挂载到DOM
instance.$mount()
document.body.appendChild(instance.$el)
// 添加到队列
messageQueue.push(instance)
// 返回关闭方法
return {
close: () => instance.close()
}
}
function install(Vue, options = {}) {
// 合并默认配置
if (options.icons) {
Object.assign(defaultIcons, options.icons)
}
if (options.images) {
Object.assign(defaultImages, options.images)
}
// 添加全局方法
Vue.prototype.$Message = showMessage
Vue.prototype.$Message.closeAll = () => {
messageQueue.forEach(instance => instance.close())
messageQueue = []
}
// 添加快捷方法
const types = ['success', 'info', 'warning', 'error']
types.forEach(type => {
Vue.prototype.$Message[type] = (message, options = {}) => {
return showMessage({
message,
type,
...options
})
}
})
}
export default { install }