zq
1 month ago
7 changed files with 147 additions and 210 deletions
@ -1,94 +0,0 @@ |
|||||
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 } |
|
||||
Loading…
Reference in new issue