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
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 }
|