128 lines
3.2 KiB
Vue
128 lines
3.2 KiB
Vue
<template>
|
|
<view>
|
|
<view :class="'popup ' + (propClassname || '') + ' ' + ((propShow || false) ? 'popup-show' : '') + ' ' + ((propAnimation || true) ? 'animation': '' )" :disable-scroll="propDisablescroll">
|
|
<view class="popup-mask" v-if="propMask || true" @tap="onMaskTap"></view>
|
|
<view :class="'popup-content popup-' + (propPosition || 'bottom')+ ' '+(propIsBar ? 'popup-bar' : '')">
|
|
<slot></slot>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {};
|
|
},
|
|
components: {},
|
|
props: {
|
|
propClassname: {
|
|
type: String,
|
|
default: ''
|
|
},
|
|
propShow: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
propPosition: {
|
|
type: String,
|
|
default: 'bottom'
|
|
},
|
|
propMask: {
|
|
type: Boolean,
|
|
default: true
|
|
},
|
|
propAnimation: {
|
|
type: Boolean,
|
|
default: true
|
|
},
|
|
propDisablescroll: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
propIsBar: {
|
|
type: Boolean,
|
|
default: false
|
|
}
|
|
},
|
|
methods: {
|
|
onMaskTap: function onMaskTap() {
|
|
this.$emit('onclose', {
|
|
detail: {}
|
|
}, {});
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
<style>
|
|
.popup-content {
|
|
position: fixed;
|
|
background: #fff;
|
|
z-index: 101;
|
|
overflow: hidden;
|
|
}
|
|
.popup-mask {
|
|
position: fixed;
|
|
top: 0;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
background-color: rgba(0, 0, 0, 0.6);
|
|
opacity: 0;
|
|
pointer-events: none;
|
|
z-index: 100;
|
|
}
|
|
.popup-left {
|
|
transform: translateX(-100%);
|
|
left: 0;
|
|
top: 0;
|
|
bottom: 0;
|
|
}
|
|
.popup-right {
|
|
transform: translateX(100%);
|
|
right: 0;
|
|
top: 0;
|
|
bottom: 0;
|
|
}
|
|
.popup-top {
|
|
top: 0;
|
|
width: 100vw;
|
|
transform: translateY(-100%);
|
|
}
|
|
.popup-bottom {
|
|
bottom: 0;
|
|
width: 100vw;
|
|
transform: translateY(100%);
|
|
}
|
|
.popup-show .popup-content {
|
|
transform: none;
|
|
}
|
|
.popup-show .popup-mask {
|
|
opacity: 1;
|
|
pointer-events: auto;
|
|
}
|
|
.popup.animation .popup-mask,
|
|
.popup.animation .popup-content {
|
|
transition: all 0.25s linear;
|
|
}
|
|
.popup-top {
|
|
border-bottom-right-radius: 20rpx;
|
|
border-bottom-left-radius: 20rpx;
|
|
}
|
|
.popup-bottom {
|
|
border-top-right-radius: 20rpx;
|
|
border-top-left-radius: 20rpx;
|
|
}
|
|
.popup-left {
|
|
border-top-right-radius: 20rpx;
|
|
border-bottom-right-radius: 20rpx;
|
|
}
|
|
.popup-right {
|
|
border-top-left-radius: 20rpx;
|
|
border-bottom-left-radius: 20rpx;
|
|
}
|
|
.popup-bar {
|
|
/* #ifdef H5 || APP */
|
|
bottom: var(--window-bottom) !important;
|
|
/* #endif */
|
|
}
|
|
</style> |