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