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.
65 lines
1.4 KiB
65 lines
1.4 KiB
import Vue from 'vue'
|
|
import GuipMessage from './src/index.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 messageQueue = []
|
|
|
|
const 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
|
|
}).$mount()
|
|
|
|
document.body.appendChild(instance.$el)
|
|
messageQueue.push(instance)
|
|
|
|
return {
|
|
close: () => instance.close()
|
|
}
|
|
}
|
|
|
|
// 添加类型快捷方法
|
|
['success', 'info', 'warning', 'error'].forEach(type => {
|
|
showMessage[type] = (message, options = {}) => {
|
|
return showMessage({ message, type, ...options })
|
|
}
|
|
})
|
|
|
|
// 添加关闭所有方法
|
|
showMessage.closeAll = () => {
|
|
messageQueue.forEach(instance => instance.close())
|
|
messageQueue = []
|
|
}
|
|
|
|
export default showMessage
|