import layerVue from './layer.vue'
|
const Notification = function (Vue, globalOption = {
|
msgtime: 1.5 // msg消失时间
|
}) {
|
const NotificationConstructor = Vue.extend(layerVue)
|
const self = {}
|
const defOptions = {
|
type: 0, // 0（信息框，默认）1（页面层）2（iframe层）3（加载层）4（tips层）,5msg,6prompt
|
title: '信息',
|
content: '',
|
area: 'auto',
|
offset: 'auto',
|
icon: -1,
|
btn: '确定',
|
time: 0,
|
maxmin: false, // 最大最小化
|
shade: true,
|
yes: '',
|
cancel: '',
|
tips: [0, {}], // 支持上右下左四个方向，通过1-4进行方向设定,可以设定tips: [1, '#c00']
|
tipsMore: false, // 是否允许多个tips
|
shadeClose: true,
|
scrollbar: true, // 是否允许浏览器出现滚动条:默认是允许
|
resize: false // 是否允许拉伸，默认是不允许
|
}
|
self.instances = {}
|
self.instancesVue = []
|
self.iframeMinList = []
|
let seed = 0
|
|
/**
|
* [function description]
|
* @method function
|
* @param {[type]} options [description]
|
* @return {[type]} [description]
|
*/
|
self.open = function (options) {
|
options = mergeJson(options, defOptions)
|
const id = `notification_${new Date().getTime()}_${seed++}`
|
options.id = id
|
options.layer = self
|
const instance = new NotificationConstructor({
|
data: options
|
})
|
if (options.type === 1) {
|
options.content.content = Vue.extend(options.content.content)
|
}
|
instance.id = id
|
instance.vm = instance.$mount()
|
self.instances[id] = {
|
inst: instance,
|
type: options.type
|
}
|
document.body.appendChild(instance.vm.$el)
|
self.instancesVue[id] = {
|
mask: '',
|
main: instance.vm,
|
iframe: ''
|
}
|
return id
|
}
|
/**
|
* [description]
|
* @param {[type]} options [description]
|
* @return {[type]} [description]
|
*/
|
self.iframe = function (opt) {
|
let option = {
|
type: 1,
|
content: opt.content,
|
area: opt.area
|
}
|
option = mergeJson(option, opt)
|
console.log(option)
|
return self.open(option)
|
}
|
/**
|
* 关闭一个弹窗
|
* @param {[type]} id [description]
|
* @return {[type]} [description]
|
*/
|
self.close = function (id) {
|
const oElm = document.getElementById(id)
|
if (oElm) {
|
document.body.removeChild(oElm)
|
delete self.instances[id]
|
self.instancesVue[id].main.$destroy()
|
if (self.instancesVue[id].iframe !== '') {
|
const minindex = parseInt(self.instancesVue[id].main.$el.getAttribute('minindex') || -2)
|
if (minindex > -1) {
|
self.iframeMinList[minindex] = -1
|
}
|
self.instancesVue[id].iframe.$destroy()
|
}
|
// 取消隐藏滚动条
|
if (!self.instancesVue[id].main.scrollbar) {
|
let scrollbarCount = 0
|
for (const key in self.instancesVue) {
|
if (!self.instancesVue[key].main.scrollbar) {
|
scrollbarCount++
|
}
|
}
|
if (scrollbarCount === 1) {
|
const htmlDom = document.getElementsByTagName('html')[0]
|
htmlDom.style.marginRight = 'auto'
|
htmlDom.classList.remove('vl-html-scrollbar-hidden')
|
}
|
}
|
// 控制遮罩,删除掉当前的遮罩
|
if (self.instancesVue[id].main.shade) {
|
const layerMask = document.getElementById(id + '_mask')
|
const maskId = id + '_mask'
|
document.body.removeChild(layerMask)
|
if (self.instancesVue[maskId]) {
|
self.instancesVue[maskId].mask.$destroy()
|
}
|
}
|
delete self.instancesVue[id]
|
} else {
|
setTimeout(function () {
|
const oElm = document.getElementById(id)
|
if (oElm) {
|
document.body.removeChild(oElm)
|
delete self.instances[id]
|
self.instancesVue[id].main.$destroy()
|
if (self.instancesVue[id].iframe !== '') {
|
self.instancesVue[id].iframe.$destroy()
|
}
|
}
|
}, 200)
|
}
|
}
|
/**
|
* 关闭一个弹窗
|
* @param {[type]} id [description]
|
* @return {[type]} [description]
|
*/
|
self.closeAll = function (type = -1) {
|
const types = {
|
page: 0,
|
iframe: 1
|
}
|
if (type === -1) {
|
for (const k in self.instances) {
|
self.close(k)
|
}
|
} else {
|
const targetType = types[type]
|
for (const k in self.instances) {
|
if (self.instances[k].type === targetType) {
|
self.close(k)
|
}
|
}
|
}
|
}
|
/**
|
* 手动最大化
|
*/
|
self.full = function (id = '') {
|
document.querySelector('#' + id + ' .lv-icon-max').click()
|
}
|
/**
|
* 手动最小化
|
*/
|
self.min = function (id = '') {
|
document.querySelector('#' + id + ' .lv-icon-mini').click()
|
}
|
/**
|
* 手动最小化
|
*/
|
self.restore = function (id = '') {
|
document.querySelector('#' + id + ' .lv-icon-huanyuan').click()
|
}
|
|
/**
|
* 合并json
|
* @method mergeJson
|
* @param {[type]} optons [description]
|
* @param {[type]} def [description]
|
* @return {[type]} [description]
|
*/
|
function mergeJson (options, def) {
|
for (const key in def) {
|
if (options[key] === undefined) {
|
options[key] = def[key]
|
}
|
}
|
return options
|
}
|
|
return self
|
}
|
|
// module.exports = Notification;
|
export default Notification
|
