This repository has been archived on 2023-08-30. You can view files and clone it, but cannot push or open issues/pull-requests.
bytedo
/
wcui
Archived
1
0
Fork 0
Code Issues Pull Requests Wiki Activity

update layer component

old
宇天 2018-02-10 01:18:15 +08:00
parent d6328a362c
commit 4684ffa4b8
2 changed files with 113 additions and 126 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

45
src/js/layer/base.js
View File

@ -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类型,回调需要自动触发

184
src/js/layer/skin/def.scss
View File

@ -11,54 +11,63 @@
.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;}
/* 默认皮肤 */ /* 默认皮肤 */
&.skin-def {padding:15px 10px;border-radius:3px;color:#666;font-size:14px;box-shadow:0 5px 20px rgba(0,0,0,.3); &.skin-def {padding:15px 10px;border-radius:3px;color:#666;font-size:14px;box-shadow:0 5px 20px rgba(0,0,0,.3);
.icon-0::before {content:"\e674";color:nth($cr, 1);} // question .icon-0::before {content:"\e674";color:nth($cr, 1);} // question
.icon-1::before {content:"\e610";color:nth($ct, 1);} // get .icon-1::before {content:"\e610";color:nth($ct, 1);} // get
.icon-2::before {content:"\e6f8";color:nth($cb, 1);} // happy .icon-2::before {content:"\e6f8";color:nth($cb, 1);} // happy
.icon-3::before {content:"\e6fd";color:nth($co, 1);} // sad .icon-3::before {content:"\e6fd";color:nth($co, 1);} // sad
.icon-4::before {content:"\e6f6";color:nth($co, 1);} // warn .icon-4::before {content:"\e6f6";color:nth($co, 1);} // warn
.icon-5::before {content:"\e673";color:nth($ct, 1);} // face .icon-5::before {content:"\e673";color:nth($ct, 1);} // face
.icon-6::before {content:"\e636";color:nth($cgr, 1);} // time .icon-6::before {content:"\e636";color:nth($cgr, 1);} // time
.icon-7::before {content:"\e623";color:nth($co, 1);} // star .icon-7::before {content:"\e623";color:nth($co, 1);} // star
.icon-8::before {content:"\e604";color:nth($cr, 1);} // mute .icon-8::before {content:"\e604";color:nth($cr, 1);} // mute
.icon-9::before {content:"\e605";color:nth($ct, 1);} // unmute .icon-9::before {content:"\e605";color:nth($ct, 1);} // unmute
/* 弹层标题栏 */ /* 弹层标题栏 */
.layer-title {width:100%;height:43px;padding:0 10px;line-height:43px;font-size:16px;color:nth($cgr, 1);} .layer-title {width:100%;height:43px;padding:0 10px;line-height:43px;font-size:16px;color:nth($cgr, 1);}
/* 弹层主体内容 */ /* 弹层主体内容 */
.layer-content {position:relative;width:100%;height:auto;min-height:50px;padding:10px; .layer-content {position:relative;width:100%;height:auto;min-height:50px;padding:10px;
.msg-icon {position:absolute;left:10px;top:10px;width:50px;height:auto;line-height:40px;font-size:35px;text-align:center;} .msg-icon {position:absolute;left:10px;top:10px;width:50px;height:auto;line-height:40px;font-size:35px;text-align:center;}
.detail {width:auto;height:100%;margin:auto auto auto 50px;padding:5px 15px;word-break:break-all;word-wrap: break-word; .detail {width:auto;height:100%;margin:auto auto auto 50px;padding:5px 15px;word-break:break-all;word-wrap: break-word;
.prompt-value {width: 230px;height: 30px;padding: 0 8px;border: 1px solid #ddd;border-radius: 3px; .prompt-value {width: 230px;height: 30px;padding: 0 8px;border: 1px solid #ddd;border-radius: 3px;
&.alert {border-color:nth($cr, 1)} &.alert {border-color:nth($cr, 1)}
&:focus {border-color:nth($ct, 1)} &:focus {border-color:nth($ct, 1)}
} }
.msg-box {line-height:30px;} .msg-box {line-height:30px;}
} }
&.none-icon .detail {margin:0 auto;} &.none-icon .detail {margin:0 auto;}
} }
/* 弹层按钮部分 */ /* 弹层按钮部分 */
.layer-ctrl {width:100%;height:40px;padding:5px 0;line-height:30px;font-size:14px;color:#454545;text-align:right; .layer-ctrl {width:100%;height:40px;padding:5px 0;line-height:30px;font-size:14px;color:#454545;text-align:right;
a {overflow:hidden;position:relative;display:inline-block;width:auto;min-width:60px;height:30px;margin-left:5px;padding:0 10px;color:nth($ct, 1);text-align:center; a {overflow:hidden;position:relative;display:inline-block;width:auto;min-width:60px;height:30px;margin-left:5px;padding:0 10px;color:nth($ct, 1);text-align:center;
&::before {position:absolute;left:-50%;top:-50%;z-index:-1;display:block;width:200%;height:200%;border-radius:50%;background:nth($cp, 2); content:"";opacity:0;transform: scale(0, .0); transition:opacity 1.3s cubic-bezier(0.23, 1, 0.32, 1),transform 1.3s cubic-bezier(0.23, 1, 0.32, 1);} &::before {position:absolute;left:-50%;top:-50%;z-index:-1;display:block;width:200%;height:200%;border-radius:50%;background:nth($cp, 2); content:"";opacity:0;transform: scale(0, .0); transition:opacity 1.3s cubic-bezier(0.23, 1, 0.32, 1),transform 1.3s cubic-bezier(0.23, 1, 0.32, 1);}
@ -94,100 +103,89 @@
/* 特殊类弹层(msg弹层) */ /* 特殊类弹层(msg弹层) */
&.type-unspecial {min-width:10px;background:transparent; &.type-unspecial {min-width:10px;background:transparent;
.layer-content {min-height:60px;padding:0} .layer-content {min-height:60px;padding:0}
.layer-content .detail {margin:0;padding:0} .layer-content .detail {margin:0;padding:0}
} }
/* 内置几种loading动画 */ /* 内置几种loading动画 */
.loading-box {position:relative;width:100px;height:100px;margin:auto; .loading-box {position:relative;width:100px;height:100px;margin:auto;
.dot-box {position:absolute;display:block;} .dot-box {position:absolute;display:block;}
/* 常规的转动 */ /* 常规的转动 */
&.style-1,&.style-2 { &.style-1,&.style-2 {
.dot-box {width:70%;height:70%;margin:15%;-webkit-animation: circle 1.3s infinite linear;-moz-animation: circle 1.3s infinite linear;animation: circle 1.3s infinite linear; .dot-box {width:70%;height:70%;margin:15%;-webkit-animation: circle 1.3s infinite linear;-moz-animation: circle 1.3s infinite linear;animation: circle 1.3s infinite linear;
&::after {content:"\e648";font:70px/1 "ui font";} &::after {content:"\e648";font:70px/1 "ui font";}
}
} }
}
&.style-2 { &.style-2 {
.dot-box::after {content:"\e64a";} .dot-box::after {content:"\e64a";}
}
/* 频谱波动 */
&.style-3 {height:50px;
.dot-box{width:100%;height:100%;
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) {animation-delay:.1s;}
&:nth-child(3) {animation-delay:.2s;}
&:nth-child(4) {animation-delay:.3s;}
&:nth-child(5) {animation-delay:.4s;}
}
} }
}
/* 频谱波动 */ /* 缓动圆圈 */
&.style-3 {height:50px; &.style-4 {
.dot-box{width:100%;height:100%; .dot-box{width:60%;height:60%;margin:20%;
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 {position:absolute;display:block;width:60px;height:60px;animation: circle2 2s infinite ease-in-out;transform: rotate(45deg);
&:nth-child(2) {-webkit-animation-delay:.1s;-moz-animation-delay:.1s;animation-delay:.1s;} &::before {display:block;width:8px;height:8px;background:nth($ct, 3);border-radius:50%;content:""}
&:nth-child(3) {-webkit-animation-delay:.2s;-moz-animation-delay:.2s;animation-delay:.2s;}
&:nth-child(4) {-webkit-animation-delay:.3s;-moz-animation-delay:.3s;animation-delay:.3s;} &:nth-child(2) {animation-delay:.1s;}
&:nth-child(5) {-webkit-animation-delay:.4s;-moz-animation-delay:.4s;animation-delay:.4s;} &:nth-child(3) {animation-delay:.2s;}
} &:nth-child(4) {animation-delay:.3s;}
} &:nth-child(5) {animation-delay:.4s;}
}
} }
}
/* 缓动圆圈 */ /* 矩阵 */
&.style-4 { &.style-5 {
.dot-box{width:60%;height:60%;margin:20%; .dot-box{width:90%;height:90%;margin:5%;
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 {float:left;display:block;width:30px;height:30px;background:nth($ct, 3);animation: grid 1.5s infinite linear;
&::before {display:block;width:8px;height:8px;background:nth($ct, 3);border-radius:50%;content:""} &:nth-child(4),
&:nth-child(8) {animation-delay:.2s;}
&:nth-child(1),
&:nth-child(5),
&:nth-child(9) {animation-delay:.3s;}
&:nth-child(2) {-webkit-animation-delay:.1s;-moz-animation-delay:.1s;animation-delay:.1s;} &:nth-child(2),
&:nth-child(3) {-webkit-animation-delay:.2s;-moz-animation-delay:.2s;animation-delay:.2s;} &:nth-child(6) {animation-delay:.4s;}
&:nth-child(4) {-webkit-animation-delay:.3s;-moz-animation-delay:.3s;animation-delay:.3s;}
&:nth-child(5) {-webkit-animation-delay:.4s;-moz-animation-delay:.4s;animation-delay:.4s;} &:nth-child(3) {animation-delay:.5s;}
} }
}
} }
}
/* 矩阵 */
&.style-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;
&:nth-child(4),
&:nth-child(8) {-webkit-animation-delay:.2s;-moz-animation-delay:.2s;animation-delay:.2s;}
&:nth-child(1),
&:nth-child(5),
&:nth-child(9) {-webkit-animation-delay:.3s;-moz-animation-delay:.3s;animation-delay:.3s;}
&:nth-child(2),
&:nth-child(6) {-webkit-animation-delay:.4s;-moz-animation-delay:.4s;animation-delay:.4s;}
&:nth-child(3) {-webkit-animation-delay:.5s;-moz-animation-delay:.5s;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 {