update layer component
parent
d6328a362c
commit
4684ffa4b8
|
@ -24,7 +24,6 @@ let defconf = {
|
||||||
maskClose: false, //遮罩点击关闭弹窗
|
maskClose: false, //遮罩点击关闭弹窗
|
||||||
radius: '0px', //弹窗圆角半径
|
radius: '0px', //弹窗圆角半径
|
||||||
area: ['auto', 'auto'],
|
area: ['auto', 'auto'],
|
||||||
shift: [null, null], // 出现的地方
|
|
||||||
title: '提示', //弹窗主标题(在工具栏上的)
|
title: '提示', //弹窗主标题(在工具栏上的)
|
||||||
menubar: true, //是否显示菜单栏
|
menubar: true, //是否显示菜单栏
|
||||||
content: '', // 弹窗的内容
|
content: '', // 弹窗的内容
|
||||||
|
@ -101,9 +100,8 @@ const _layer = {
|
||||||
if (typeof title === 'function') {
|
if (typeof title === 'function') {
|
||||||
opt.yes = title
|
opt.yes = title
|
||||||
} else {
|
} else {
|
||||||
title += ''
|
|
||||||
if (title) {
|
if (title) {
|
||||||
opt.title = title
|
opt.title = title + ''
|
||||||
}
|
}
|
||||||
if (cb && typeof cb === 'function') {
|
if (cb && typeof cb === 'function') {
|
||||||
opt.yes = cb
|
opt.yes = cb
|
||||||
|
@ -120,9 +118,8 @@ const _layer = {
|
||||||
opt.no = yescb
|
opt.no = yescb
|
||||||
}
|
}
|
||||||
} else {
|
} else {
|
||||||
title += ''
|
|
||||||
if (title) {
|
if (title) {
|
||||||
opt.title = title
|
opt.title = title + ''
|
||||||
}
|
}
|
||||||
if (yescb && typeof yescb === 'function') {
|
if (yescb && typeof yescb === 'function') {
|
||||||
opt.yes = yescb
|
opt.yes = yescb
|
||||||
|
@ -177,8 +174,8 @@ const _layer = {
|
||||||
fixed: true
|
fixed: true
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
tips: function(msg, elem, conf) {
|
tips: function(content, container, conf) {
|
||||||
if (!(elem instanceof HTMLElement)) {
|
if (!(container instanceof HTMLElement)) {
|
||||||
return Anot.error('tips类型必须指定一个目标容器')
|
return Anot.error('tips类型必须指定一个目标容器')
|
||||||
}
|
}
|
||||||
if (typeof conf !== 'object') {
|
if (typeof conf !== 'object') {
|
||||||
|
@ -197,8 +194,8 @@ const _layer = {
|
||||||
if (!conf.color) {
|
if (!conf.color) {
|
||||||
conf.color = '#fff'
|
conf.color = '#fff'
|
||||||
}
|
}
|
||||||
conf.$elem = elem
|
conf.container = container
|
||||||
conf.content = msg
|
conf.content = content
|
||||||
conf.type = 5
|
conf.type = 5
|
||||||
conf.icon = 0
|
conf.icon = 0
|
||||||
conf.fixed = true
|
conf.fixed = true
|
||||||
|
@ -289,7 +286,7 @@ __layer__.prototype = {
|
||||||
...conf.state
|
...conf.state
|
||||||
},
|
},
|
||||||
props: conf.props,
|
props: conf.props,
|
||||||
skip: ['area', 'shift', 'skin', 'mask', 'maskClose'],
|
skip: ['area', 'shift', 'skin', 'mask', 'maskClose', 'container'],
|
||||||
methods: {
|
methods: {
|
||||||
onMaskClick: function() {
|
onMaskClick: function() {
|
||||||
if (this.type < 4 && !this.maskClose) {
|
if (this.type < 4 && !this.maskClose) {
|
||||||
|
@ -371,7 +368,7 @@ __layer__.prototype = {
|
||||||
layBox.setAttribute(':click', 'cancelBubble')
|
layBox.setAttribute(':click', 'cancelBubble')
|
||||||
|
|
||||||
//暂时隐藏,避免修正定位时,能看到闪一下
|
//暂时隐藏,避免修正定位时,能看到闪一下
|
||||||
layBox.style.cssText =
|
layBox.style.cssText +=
|
||||||
'visibility:hidden; border-radius:' + state.radius + 'px'
|
'visibility:hidden; border-radius:' + state.radius + 'px'
|
||||||
|
|
||||||
//没有菜单栏, 且未禁止拖拽,则加上可拖拽属性
|
//没有菜单栏, 且未禁止拖拽,则加上可拖拽属性
|
||||||
|
@ -380,7 +377,7 @@ __layer__.prototype = {
|
||||||
layBox.setAttribute('data-limit', 'window')
|
layBox.setAttribute('data-limit', 'window')
|
||||||
}
|
}
|
||||||
|
|
||||||
//弹窗的宽高
|
// size of layer-content
|
||||||
var boxcss = ''
|
var boxcss = ''
|
||||||
if (state.area[0] !== 'auto') {
|
if (state.area[0] !== 'auto') {
|
||||||
boxcss += 'width: ' + state.area[0] + ';'
|
boxcss += 'width: ' + state.area[0] + ';'
|
||||||
|
@ -495,35 +492,27 @@ __layer__.prototype = {
|
||||||
layerDom[$id] = this.create()
|
layerDom[$id] = this.create()
|
||||||
|
|
||||||
delete state.specialMode
|
delete state.specialMode
|
||||||
// if (layerDom[this.init.$id][0]) {
|
|
||||||
// document.body.appendChild(layerDom[this.init.$id][0])
|
|
||||||
// //仅在允许点击遮罩时,初始化控制器,减少资源消耗
|
|
||||||
// if (this.init.shadeClose) {
|
|
||||||
// Anot(this.cInit)
|
|
||||||
// // Anot.scan(layerDom[this.init.$id][0])
|
|
||||||
// }
|
|
||||||
// }
|
|
||||||
|
|
||||||
document.body.appendChild(layerDom[$id][0])
|
document.body.appendChild(layerDom[$id][0])
|
||||||
this.vm = Anot(this.init)
|
this.vm = Anot(this.init)
|
||||||
// Anot.scan(layerDom[this.init.$id][1])
|
|
||||||
return this
|
return this
|
||||||
},
|
},
|
||||||
show: function() {
|
show: function() {
|
||||||
let { state, $id } = this.init
|
let { state, $id, container } = this.init
|
||||||
var _this = this
|
|
||||||
|
|
||||||
setTimeout(function() {
|
setTimeout(function() {
|
||||||
var style = { visibility: '', background: state.background }
|
var style = { visibility: '', background: state.background }
|
||||||
let css = getComputedStyle(layerDom[$id][1])
|
let css = getComputedStyle(layerDom[$id][1])
|
||||||
|
|
||||||
|
// tips类型, 弹层的定位要在指定的容器上
|
||||||
if (state.type === 5) {
|
if (state.type === 5) {
|
||||||
|
// only type[tips] can define `color`
|
||||||
style.color = state.color
|
style.color = state.color
|
||||||
|
|
||||||
let $elem = Anot(_this.init.$elem)
|
let $container = Anot(container)
|
||||||
let ew = $elem.innerWidth()
|
let ew = $container.innerWidth()
|
||||||
let ol = $elem.offset().left - document.body.scrollLeft
|
let ol = $container.offset().left - document.body.scrollLeft
|
||||||
let ot = $elem.offset().top - document.body.scrollTop
|
let ot = $container.offset().top - document.body.scrollTop
|
||||||
|
|
||||||
style.left = ol + ew * 0.7
|
style.left = ol + ew * 0.7
|
||||||
style.top = ot - parseInt(css.height) - 8
|
style.top = ot - parseInt(css.height) - 8
|
||||||
|
@ -551,7 +540,7 @@ __layer__.prototype = {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
Anot(layerDom[_this.init.$id][1]).css(style)
|
Anot(layerDom[$id][1]).css(style)
|
||||||
}, 4)
|
}, 4)
|
||||||
|
|
||||||
// loading类型,回调需要自动触发
|
// loading类型,回调需要自动触发
|
||||||
|
|
|
@ -11,11 +11,20 @@
|
||||||
|
|
||||||
.do-layer {width:auto;height:auto;
|
.do-layer {width:auto;height:auto;
|
||||||
|
|
||||||
&.mask {position:fixed;z-index:65534;left:0;top:0;width:100%;height:100%;background:rgba(0,0,0,.3);}
|
|
||||||
|
.layer-box {position:absolute;}
|
||||||
|
|
||||||
|
&.mask {position:fixed;z-index:65534;left:0;top:0;width:100%;height:100%;background:rgba(0,0,0,.3);
|
||||||
|
|
||||||
|
.layer-box {position:absolute;}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
a {text-decoration:none;}
|
a {text-decoration:none;}
|
||||||
|
|
||||||
.layer-box {position:absolute;left:50%;top:50%;z-index:65535;
|
.layer-box {left:50%;top:50%;z-index:65535;
|
||||||
|
|
||||||
|
&.shift {transition: all .3s ease-in-out;}
|
||||||
|
|
||||||
&.scale {transform:scale(1.02);transition:transform .1s linear;}
|
&.scale {transform:scale(1.02);transition:transform .1s linear;}
|
||||||
|
|
||||||
|
@ -122,12 +131,12 @@
|
||||||
|
|
||||||
.dot-box{width:100%;height:100%;
|
.dot-box{width:100%;height:100%;
|
||||||
|
|
||||||
i {float:left;display:block;width:10px;height:100%;margin:0 5px;background:nth($ct, 3);-webkit-animation: bounce 1s infinite ease-in-out;-moz-animation: bounce 1s infinite ease-in-out;animation: bounce 1s infinite ease-in-out;-webkit-transform:scaleY(.6);-moz-transform:scaleY(.6);transform:scaleY(.6);
|
i {float:left;display:block;width:10px;height:100%;margin:0 5px;background:nth($ct, 3);animation: bounce 1s infinite ease-in-out;transform:scaleY(.6);
|
||||||
|
|
||||||
&:nth-child(2) {-webkit-animation-delay:.1s;-moz-animation-delay:.1s;animation-delay:.1s;}
|
&:nth-child(2) {animation-delay:.1s;}
|
||||||
&:nth-child(3) {-webkit-animation-delay:.2s;-moz-animation-delay:.2s;animation-delay:.2s;}
|
&:nth-child(3) {animation-delay:.2s;}
|
||||||
&:nth-child(4) {-webkit-animation-delay:.3s;-moz-animation-delay:.3s;animation-delay:.3s;}
|
&:nth-child(4) {animation-delay:.3s;}
|
||||||
&:nth-child(5) {-webkit-animation-delay:.4s;-moz-animation-delay:.4s;animation-delay:.4s;}
|
&:nth-child(5) {animation-delay:.4s;}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -137,14 +146,14 @@
|
||||||
|
|
||||||
.dot-box{width:60%;height:60%;margin:20%;
|
.dot-box{width:60%;height:60%;margin:20%;
|
||||||
|
|
||||||
i {position:absolute;display:block;width:60px;height:60px;-webkit-animation: circle2 2s infinite ease-in-out;-moz-animation: circle2 2s infinite ease-in-out;animation: circle2 2s infinite ease-in-out;-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);transform: rotate(45deg);
|
i {position:absolute;display:block;width:60px;height:60px;animation: circle2 2s infinite ease-in-out;transform: rotate(45deg);
|
||||||
|
|
||||||
&::before {display:block;width:8px;height:8px;background:nth($ct, 3);border-radius:50%;content:""}
|
&::before {display:block;width:8px;height:8px;background:nth($ct, 3);border-radius:50%;content:""}
|
||||||
|
|
||||||
&:nth-child(2) {-webkit-animation-delay:.1s;-moz-animation-delay:.1s;animation-delay:.1s;}
|
&:nth-child(2) {animation-delay:.1s;}
|
||||||
&:nth-child(3) {-webkit-animation-delay:.2s;-moz-animation-delay:.2s;animation-delay:.2s;}
|
&:nth-child(3) {animation-delay:.2s;}
|
||||||
&:nth-child(4) {-webkit-animation-delay:.3s;-moz-animation-delay:.3s;animation-delay:.3s;}
|
&:nth-child(4) {animation-delay:.3s;}
|
||||||
&:nth-child(5) {-webkit-animation-delay:.4s;-moz-animation-delay:.4s;animation-delay:.4s;}
|
&:nth-child(5) {animation-delay:.4s;}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -154,41 +163,30 @@
|
||||||
|
|
||||||
.dot-box{width:90%;height:90%;margin:5%;
|
.dot-box{width:90%;height:90%;margin:5%;
|
||||||
|
|
||||||
i {float:left;display:block;width:30px;height:30px;background:nth($ct, 3);-webkit-animation: grid 1.5s infinite linear;-moz-animation: grid 1.5s infinite linear;animation: grid 1.5s infinite linear;
|
i {float:left;display:block;width:30px;height:30px;background:nth($ct, 3);animation: grid 1.5s infinite linear;
|
||||||
|
|
||||||
&:nth-child(4),
|
&:nth-child(4),
|
||||||
&:nth-child(8) {-webkit-animation-delay:.2s;-moz-animation-delay:.2s;animation-delay:.2s;}
|
&:nth-child(8) {animation-delay:.2s;}
|
||||||
&:nth-child(1),
|
&:nth-child(1),
|
||||||
&:nth-child(5),
|
&:nth-child(5),
|
||||||
&:nth-child(9) {-webkit-animation-delay:.3s;-moz-animation-delay:.3s;animation-delay:.3s;}
|
&:nth-child(9) {animation-delay:.3s;}
|
||||||
|
|
||||||
&:nth-child(2),
|
&:nth-child(2),
|
||||||
&:nth-child(6) {-webkit-animation-delay:.4s;-moz-animation-delay:.4s;animation-delay:.4s;}
|
&:nth-child(6) {animation-delay:.4s;}
|
||||||
|
|
||||||
&:nth-child(3) {-webkit-animation-delay:.5s;-moz-animation-delay:.5s;animation-delay:.5s;}
|
&:nth-child(3) {animation-delay:.5s;}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
}
|
||||||
&:active {z-index:65536;}
|
&:active {z-index:65536;}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
.do-layer-cover {
|
|
||||||
|
|
||||||
&.type-6 {background:rgba(0,0,0,.3);}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
@-webkit-keyframes circle {
|
@-webkit-keyframes circle {
|
||||||
to {-webkit-transform: rotate(360deg);}
|
to {-webkit-transform: rotate(360deg);}
|
||||||
|
|
Reference in New Issue