138 lines
2.6 KiB
Vue
138 lines
2.6 KiB
Vue
|
<template>
|
|||
|
|
<view @touchmove="onTouchMove">
|
|||
|
|
<!-- 遮罩层动画 -->
|
|||
|
|
<view class="mask" @click="hideOnBlur && (currentValue = false)" v-if="currentValue"></view>
|
|||
|
|
<!-- 显示信息层 -->
|
|||
|
|
<view class="popup_box" :class="{'bottom': type == 1000 ,'center':type == 2000}" :style="{opacity:opacity,transform:transform}">
|
|||
|
|
<slot></slot>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
export default {
|
|||
|
|
props: {
|
|||
|
|
//是否显示
|
|||
|
|
value: {
|
|||
|
|
type: Boolean,
|
|||
|
|
default: function() {
|
|||
|
|
return false;
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
//点击遮罩层关闭弹窗
|
|||
|
|
hideOnBlur: {
|
|||
|
|
type: Boolean,
|
|||
|
|
default: function() {
|
|||
|
|
return true;
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
//禁止页面滚动（H5生效）
|
|||
|
|
scroll: {
|
|||
|
|
type: Boolean,
|
|||
|
|
default: true
|
|||
|
|
},
|
|||
|
|
// 类型
|
|||
|
|
// 1000 靠下
|
|||
|
|
// 2000 居中
|
|||
|
|
type: {
|
|||
|
|
type: String,
|
|||
|
|
default: function() {
|
|||
|
|
return "1000";
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
created() {
|
|||
|
|
if (typeof this.value !== "undefined") {
|
|||
|
|
this.currentValue = this.value;
|
|||
|
|
this.setAnimation(this.value);
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
watch: {
|
|||
|
|
value(val) {
|
|||
|
|
this.currentValue = val;
|
|||
|
|
this.setAnimation(val);
|
|||
|
|
},
|
|||
|
|
currentValue(val) {
|
|||
|
|
this.$emit("change", val);
|
|||
|
|
this.$emit("input", val);
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
// 传进来的值
|
|||
|
|
currentValue: false,
|
|||
|
|
opacity: 0,
|
|||
|
|
transform: ""
|
|||
|
|
};
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
onTouchMove: function(event) {
|
|||
|
|
!this.scroll && event.preventDefault();
|
|||
|
|
},
|
|||
|
|
setAnimation(val) {
|
|||
|
|
if (this.type == 1000) {
|
|||
|
|
if (val) {
|
|||
|
|
this.transform = "translateY(0%)";
|
|||
|
|
this.opacity = 1;
|
|||
|
|
} else {
|
|||
|
|
this.opacity = 0;
|
|||
|
|
this.transform = "translateY(100%)";
|
|||
|
|
}
|
|||
|
|
} else if (this.type == 2000) {
|
|||
|
|
if (val) {
|
|||
|
|
this.opacity = 1;
|
|||
|
|
this.transform = "translateX(-50%) translateY(-50%) scale(1)";
|
|||
|
|
} else {
|
|||
|
|
this.opacity = 0;
|
|||
|
|
this.transform = "translateX(-50%) translateY(-50%) scale(0)";
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style lang="scss" scoped>
|
|||
|
|
/*遮罩层*/
|
|||
|
|
.mask {
|
|||
|
|
position: fixed;
|
|||
|
|
z-index: 500;
|
|||
|
|
top: 0;
|
|||
|
|
right: 0;
|
|||
|
|
left: 0;
|
|||
|
|
bottom: 0;
|
|||
|
|
background: rgba(0, 0, 0, 0.5);
|
|||
|
|
transition: all 0.4s;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.popup_box {
|
|||
|
|
position: fixed;
|
|||
|
|
max-width: 100%;
|
|||
|
|
max-height: 100%;
|
|||
|
|
min-height: 50upx;
|
|||
|
|
z-index: 501;
|
|||
|
|
opacity: 0;
|
|||
|
|
font-size: 28upx;
|
|||
|
|
transition: all 0.4s;
|
|||
|
|
border-radius: 40upx;
|
|||
|
|
&.bottom {
|
|||
|
|
left: 0upx;
|
|||
|
|
/* #ifdef H5 */
|
|||
|
|
bottom: var(--window-bottom);
|
|||
|
|
/* #endif */
|
|||
|
|
/* #ifndef H5 */
|
|||
|
|
bottom: 0;
|
|||
|
|
/* #endif */
|
|||
|
|
min-width: 100%;
|
|||
|
|
transform: translateY(100%);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
&.center {
|
|||
|
|
left: 50%;
|
|||
|
|
top: 50%;
|
|||
|
|
transform: translateX(-50%) translateY(-50%);
|
|||
|
|
border-radius: 50upx;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</style>
|