|
|
@ -5,7 +5,7 @@ |
|
|
:duration="duration" :show="showTrans" @click="onTap" /> |
|
|
:duration="duration" :show="showTrans" @click="onTap" /> |
|
|
<uni-transition key="2" :mode-class="ani" name="content" :styles="transClass" :duration="duration" |
|
|
<uni-transition key="2" :mode-class="ani" name="content" :styles="transClass" :duration="duration" |
|
|
:show="showTrans" @click="onTap"> |
|
|
:show="showTrans" @click="onTap"> |
|
|
<view class="uni-popup__wrapper" :style="{ backgroundColor: bg }" :class="[popupstyle]" @click="clear"> |
|
|
<view class="uni-popup__wrapper" :style="getStyles" :class="[popupstyle]" @click="clear"> |
|
|
<slot /> |
|
|
<slot /> |
|
|
</view> |
|
|
</view> |
|
|
</uni-transition> |
|
|
</uni-transition> |
|
|
@ -39,6 +39,7 @@ |
|
|
* @property {Boolean} isMaskClick = [true|false] 蒙版点击是否关闭弹窗 |
|
|
* @property {Boolean} isMaskClick = [true|false] 蒙版点击是否关闭弹窗 |
|
|
* @property {String} backgroundColor 主窗口背景色 |
|
|
* @property {String} backgroundColor 主窗口背景色 |
|
|
* @property {String} maskBackgroundColor 蒙版颜色 |
|
|
* @property {String} maskBackgroundColor 蒙版颜色 |
|
|
|
|
|
* @property {String} borderRadius 设置圆角(左上、右上、右下和左下) 示例:"10px 10px 10px 10px" |
|
|
* @property {Boolean} safeArea 是否适配底部安全区 |
|
|
* @property {Boolean} safeArea 是否适配底部安全区 |
|
|
* @event {Function} change 打开关闭弹窗触发，e={show: false} |
|
|
* @event {Function} change 打开关闭弹窗触发，e={show: false} |
|
|
* @event {Function} maskClick 点击遮罩触发 |
|
|
* @event {Function} maskClick 点击遮罩触发 |
|
|
@ -86,6 +87,9 @@ |
|
|
type: String, |
|
|
type: String, |
|
|
default: 'rgba(0, 0, 0, 0.4)' |
|
|
default: 'rgba(0, 0, 0, 0.4)' |
|
|
}, |
|
|
}, |
|
|
|
|
|
borderRadius:{ |
|
|
|
|
|
type: String, |
|
|
|
|
|
} |
|
|
}, |
|
|
}, |
|
|
|
|
|
|
|
|
watch: { |
|
|
watch: { |
|
|
@ -157,16 +161,25 @@ |
|
|
backgroundColor: 'rgba(0, 0, 0, 0.4)' |
|
|
backgroundColor: 'rgba(0, 0, 0, 0.4)' |
|
|
}, |
|
|
}, |
|
|
transClass: { |
|
|
transClass: { |
|
|
|
|
|
backgroundColor: 'transparent', |
|
|
|
|
|
borderRadius: this.borderRadius || "0", |
|
|
position: 'fixed', |
|
|
position: 'fixed', |
|
|
left: 0, |
|
|
left: 0, |
|
|
right: 0 |
|
|
right: 0 |
|
|
}, |
|
|
}, |
|
|
maskShow: true, |
|
|
maskShow: true, |
|
|
mkclick: true, |
|
|
mkclick: true, |
|
|
popupstyle: this.isDesktop ? 'fixforpc-top' : 'top' |
|
|
popupstyle: 'top' |
|
|
} |
|
|
} |
|
|
}, |
|
|
}, |
|
|
computed: { |
|
|
computed: { |
|
|
|
|
|
getStyles() { |
|
|
|
|
|
let res = { backgroundColor: this.bg }; |
|
|
|
|
|
if (this.borderRadius || "0") { |
|
|
|
|
|
res = Object.assign(res, { borderRadius: this.borderRadius }) |
|
|
|
|
|
} |
|
|
|
|
|
return res; |
|
|
|
|
|
}, |
|
|
isDesktop() { |
|
|
isDesktop() { |
|
|
return this.popupWidth >= 500 && this.popupHeight >= 500 |
|
|
return this.popupWidth >= 500 && this.popupHeight >= 500 |
|
|
}, |
|
|
}, |
|
|
@ -179,6 +192,17 @@ |
|
|
}, |
|
|
}, |
|
|
mounted() { |
|
|
mounted() { |
|
|
const fixSize = () => { |
|
|
const fixSize = () => { |
|
|
|
|
|
// #ifdef MP-WEIXIN |
|
|
|
|
|
const { |
|
|
|
|
|
windowWidth, |
|
|
|
|
|
windowHeight, |
|
|
|
|
|
windowTop, |
|
|
|
|
|
safeArea, |
|
|
|
|
|
screenHeight, |
|
|
|
|
|
safeAreaInsets |
|
|
|
|
|
} = uni.getWindowInfo() |
|
|
|
|
|
// #endif |
|
|
|
|
|
// #ifndef MP-WEIXIN |
|
|
const { |
|
|
const { |
|
|
windowWidth, |
|
|
windowWidth, |
|
|
windowHeight, |
|
|
windowHeight, |
|
|
@ -187,6 +211,7 @@ |
|
|
screenHeight, |
|
|
screenHeight, |
|
|
safeAreaInsets |
|
|
safeAreaInsets |
|
|
} = uni.getSystemInfoSync() |
|
|
} = uni.getSystemInfoSync() |
|
|
|
|
|
// #endif |
|
|
this.popupWidth = windowWidth |
|
|
this.popupWidth = windowWidth |
|
|
this.popupHeight = windowHeight + (windowTop || 0) |
|
|
this.popupHeight = windowHeight + (windowTop || 0) |
|
|
// TODO fix by mehaotian 是否适配底部安全区 ,目前微信ios 、和 app ios 计算有差异，需要框架修复 |
|
|
// TODO fix by mehaotian 是否适配底部安全区 ,目前微信ios 、和 app ios 计算有差异，需要框架修复 |
|
|
@ -221,6 +246,12 @@ |
|
|
this.setH5Visible() |
|
|
this.setH5Visible() |
|
|
}, |
|
|
}, |
|
|
// #endif |
|
|
// #endif |
|
|
|
|
|
activated() { |
|
|
|
|
|
this.setH5Visible(!this.showPopup); |
|
|
|
|
|
}, |
|
|
|
|
|
deactivated() { |
|
|
|
|
|
this.setH5Visible(true); |
|
|
|
|
|
}, |
|
|
created() { |
|
|
created() { |
|
|
// this.mkclick = this.isMaskClick || this.maskClick |
|
|
// this.mkclick = this.isMaskClick || this.maskClick |
|
|
if (this.isMaskClick === null && this.maskClick === null) { |
|
|
if (this.isMaskClick === null && this.maskClick === null) { |
|
|
@ -240,10 +271,10 @@ |
|
|
this.maskClass.backgroundColor = this.maskBackgroundColor |
|
|
this.maskClass.backgroundColor = this.maskBackgroundColor |
|
|
}, |
|
|
}, |
|
|
methods: { |
|
|
methods: { |
|
|
setH5Visible() { |
|
|
setH5Visible(visible = true) { |
|
|
// #ifdef H5 |
|
|
// #ifdef H5 |
|
|
// fix by mehaotian 处理 h5 滚动穿透的问题 |
|
|
// fix by mehaotian 处理 h5 滚动穿透的问题 |
|
|
document.getElementsByTagName('body')[0].style.overflow = 'visible' |
|
|
document.getElementsByTagName('body')[0].style.overflow = visible ? "visible" : "hidden"; |
|
|
// #endif |
|
|
// #endif |
|
|
}, |
|
|
}, |
|
|
/** |
|
|
/** |
|
|
@ -323,13 +354,15 @@ |
|
|
position: 'fixed', |
|
|
position: 'fixed', |
|
|
left: 0, |
|
|
left: 0, |
|
|
right: 0, |
|
|
right: 0, |
|
|
backgroundColor: this.bg |
|
|
backgroundColor: this.bg, |
|
|
|
|
|
borderRadius:this.borderRadius || "0" |
|
|
} |
|
|
} |
|
|
// TODO 兼容 type 属性 ，后续会废弃 |
|
|
// TODO 兼容 type 属性 ，后续会废弃 |
|
|
if (type) return |
|
|
if (type) return |
|
|
this.showPopup = true |
|
|
this.showPopup = true |
|
|
this.showTrans = true |
|
|
this.showTrans = true |
|
|
this.$nextTick(() => { |
|
|
this.$nextTick(() => { |
|
|
|
|
|
this.showPoptrans() |
|
|
if (this.messageChild && this.type === 'message') { |
|
|
if (this.messageChild && this.type === 'message') { |
|
|
this.messageChild.timerClose() |
|
|
this.messageChild.timerClose() |
|
|
} |
|
|
} |
|
|
@ -347,19 +380,25 @@ |
|
|
right: 0, |
|
|
right: 0, |
|
|
bottom: 0, |
|
|
bottom: 0, |
|
|
paddingBottom: this.safeAreaInsets + 'px', |
|
|
paddingBottom: this.safeAreaInsets + 'px', |
|
|
backgroundColor: this.bg |
|
|
backgroundColor: this.bg, |
|
|
|
|
|
borderRadius:this.borderRadius || "0", |
|
|
} |
|
|
} |
|
|
// TODO 兼容 type 属性 ，后续会废弃 |
|
|
// TODO 兼容 type 属性 ，后续会废弃 |
|
|
if (type) return |
|
|
if (type) return |
|
|
this.showPopup = true |
|
|
this.showPoptrans() |
|
|
this.showTrans = true |
|
|
|
|
|
}, |
|
|
}, |
|
|
/** |
|
|
/** |
|
|
* 中间弹出样式处理 |
|
|
* 中间弹出样式处理 |
|
|
*/ |
|
|
*/ |
|
|
center(type) { |
|
|
center(type) { |
|
|
this.popupstyle = 'center' |
|
|
this.popupstyle = 'center' |
|
|
|
|
|
//微信小程序下，组合动画会出现文字向上闪动问题，再此做特殊处理 |
|
|
|
|
|
// #ifdef MP-WEIXIN |
|
|
|
|
|
this.ani = ['fade'] |
|
|
|
|
|
// #endif |
|
|
|
|
|
// #ifndef MP-WEIXIN |
|
|
this.ani = ['zoom-out', 'fade'] |
|
|
this.ani = ['zoom-out', 'fade'] |
|
|
|
|
|
// #endif |
|
|
this.transClass = { |
|
|
this.transClass = { |
|
|
position: 'fixed', |
|
|
position: 'fixed', |
|
|
/* #ifndef APP-NVUE */ |
|
|
/* #ifndef APP-NVUE */ |
|
|
@ -371,12 +410,12 @@ |
|
|
right: 0, |
|
|
right: 0, |
|
|
top: 0, |
|
|
top: 0, |
|
|
justifyContent: 'center', |
|
|
justifyContent: 'center', |
|
|
alignItems: 'center' |
|
|
alignItems: 'center', |
|
|
|
|
|
borderRadius:this.borderRadius || "0" |
|
|
} |
|
|
} |
|
|
// TODO 兼容 type 属性 ，后续会废弃 |
|
|
// TODO 兼容 type 属性 ，后续会废弃 |
|
|
if (type) return |
|
|
if (type) return |
|
|
this.showPopup = true |
|
|
this.showPoptrans() |
|
|
this.showTrans = true |
|
|
|
|
|
}, |
|
|
}, |
|
|
left(type) { |
|
|
left(type) { |
|
|
this.popupstyle = 'left' |
|
|
this.popupstyle = 'left' |
|
|
@ -387,6 +426,7 @@ |
|
|
bottom: 0, |
|
|
bottom: 0, |
|
|
top: 0, |
|
|
top: 0, |
|
|
backgroundColor: this.bg, |
|
|
backgroundColor: this.bg, |
|
|
|
|
|
borderRadius:this.borderRadius || "0", |
|
|
/* #ifndef APP-NVUE */ |
|
|
/* #ifndef APP-NVUE */ |
|
|
display: 'flex', |
|
|
display: 'flex', |
|
|
flexDirection: 'column' |
|
|
flexDirection: 'column' |
|
|
@ -394,8 +434,7 @@ |
|
|
} |
|
|
} |
|
|
// TODO 兼容 type 属性 ，后续会废弃 |
|
|
// TODO 兼容 type 属性 ，后续会废弃 |
|
|
if (type) return |
|
|
if (type) return |
|
|
this.showPopup = true |
|
|
this.showPoptrans() |
|
|
this.showTrans = true |
|
|
|
|
|
}, |
|
|
}, |
|
|
right(type) { |
|
|
right(type) { |
|
|
this.popupstyle = 'right' |
|
|
this.popupstyle = 'right' |
|
|
@ -406,6 +445,7 @@ |
|
|
right: 0, |
|
|
right: 0, |
|
|
top: 0, |
|
|
top: 0, |
|
|
backgroundColor: this.bg, |
|
|
backgroundColor: this.bg, |
|
|
|
|
|
borderRadius:this.borderRadius || "0", |
|
|
/* #ifndef APP-NVUE */ |
|
|
/* #ifndef APP-NVUE */ |
|
|
display: 'flex', |
|
|
display: 'flex', |
|
|
flexDirection: 'column' |
|
|
flexDirection: 'column' |
|
|
@ -413,8 +453,13 @@ |
|
|
} |
|
|
} |
|
|
// TODO 兼容 type 属性 ，后续会废弃 |
|
|
// TODO 兼容 type 属性 ，后续会废弃 |
|
|
if (type) return |
|
|
if (type) return |
|
|
|
|
|
this.showPoptrans() |
|
|
|
|
|
}, |
|
|
|
|
|
showPoptrans(){ |
|
|
|
|
|
this.$nextTick(()=>{ |
|
|
this.showPopup = true |
|
|
this.showPopup = true |
|
|
this.showTrans = true |
|
|
this.showTrans = true |
|
|
|
|
|
}) |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
@ -424,6 +469,7 @@ |
|
|
position: fixed; |
|
|
position: fixed; |
|
|
/* #ifndef APP-NVUE */ |
|
|
/* #ifndef APP-NVUE */ |
|
|
z-index: 99; |
|
|
z-index: 99; |
|
|
|
|
|
|
|
|
/* #endif */ |
|
|
/* #endif */ |
|
|
&.top, |
|
|
&.top, |
|
|
&.left, |
|
|
&.left, |
|
|
@ -439,7 +485,6 @@ |
|
|
.uni-popup__wrapper { |
|
|
.uni-popup__wrapper { |
|
|
/* #ifndef APP-NVUE */ |
|
|
/* #ifndef APP-NVUE */ |
|
|
display: block; |
|
|
display: block; |
|
|
border-radius: 10px; |
|
|
|
|
|
/* #endif */ |
|
|
/* #endif */ |
|
|
position: relative; |
|
|
position: relative; |
|
|
|
|
|
|
|
|
|
