You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
109 lines
2.0 KiB
Vue
109 lines
2.0 KiB
Vue
2 years ago
|
<template>
|
||
|
|
<view @touchmove.stop.prevent>
|
||
|
|
<view class="tui-popup-class tui-bottom-popup" :class="{ 'tui-popup-show': show, 'tui-popup-radius': radius }" :style="{ background: backgroundColor, height: height ? height + 'rpx' : 'auto', zIndex: zIndex,transform:`translate3d(0, ${show?translateY:'100%'}, 0)`}">
|
||
|
|
<slot></slot>
|
||
|
|
</view>
|
||
|
|
<view class="tui-popup-mask" :class="[show ? 'tui-mask-show' : '']" :style="{ zIndex: maskZIndex }" v-if="mask" @tap="handleClose"></view>
|
||
|
|
</view>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
export default {
|
||
|
|
name: 'tuiBottomPopup',
|
||
|
|
emits: ['close'],
|
||
|
|
props: {
|
||
|
|
//是否需要mask
|
||
|
|
mask: {
|
||
|
|
type: Boolean,
|
||
|
|
default: true
|
||
|
|
},
|
||
|
|
//控制显示
|
||
|
|
show: {
|
||
|
|
type: Boolean,
|
||
|
|
default: false
|
||
|
|
},
|
||
|
|
//背景颜色
|
||
|
|
backgroundColor: {
|
||
|
|
type: String,
|
||
|
|
default: '#fff'
|
||
|
|
},
|
||
|
|
//高度 rpx
|
||
|
|
height: {
|
||
|
|
type: Number,
|
||
|
|
default: 0
|
||
|
|
},
|
||
|
|
//设置圆角
|
||
|
|
radius: {
|
||
|
|
type: Boolean,
|
||
|
|
default: true
|
||
|
|
},
|
||
|
|
zIndex: {
|
||
|
|
type: [Number, String],
|
||
|
|
default: 997
|
||
|
|
},
|
||
|
|
maskZIndex: {
|
||
|
|
type: [Number, String],
|
||
|
|
default: 996
|
||
|
|
},
|
||
|
|
//弹层显示时，垂直方向移动的距离
|
||
|
|
translateY: {
|
||
|
|
type: String,
|
||
|
|
default: '0'
|
||
|
|
}
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
handleClose() {
|
||
|
|
if (!this.show) {
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
this.$emit('close', {});
|
||
|
|
}
|
||
|
|
}
|
||
|
|
};
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style scoped>
|
||
|
|
.tui-bottom-popup {
|
||
|
|
width: 100%;
|
||
|
|
position: fixed;
|
||
|
|
left: 0;
|
||
|
|
right: 0;
|
||
|
|
bottom: 0;
|
||
|
|
opacity: 0;
|
||
|
|
transform: translate3d(0, 100%, 0);
|
||
|
|
transform-origin: center;
|
||
|
|
transition: all 0.3s ease-in-out;
|
||
|
|
min-height: 20rpx;
|
||
|
|
padding-bottom: env(safe-area-inset-bottom);
|
||
|
|
}
|
||
|
|
|
||
|
|
.tui-popup-radius {
|
||
|
|
border-top-left-radius: 24rpx;
|
||
|
|
border-top-right-radius: 24rpx;
|
||
|
|
overflow: hidden;
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
.tui-popup-show {
|
||
|
|
opacity: 1;
|
||
|
|
/* transform: translate3d(0, 0, 0); */
|
||
|
|
}
|
||
|
|
|
||
|
|
.tui-popup-mask {
|
||
|
|
position: fixed;
|
||
|
|
top: 0;
|
||
|
|
left: 0;
|
||
|
|
right: 0;
|
||
|
|
bottom: 0;
|
||
|
|
background-color: rgba(0, 0, 0, 0.6);
|
||
|
|
transition: all 0.3s ease-in-out;
|
||
|
|
opacity: 0;
|
||
|
|
visibility: hidden;
|
||
|
|
}
|
||
|
|
|
||
|
|
.tui-mask-show {
|
||
|
|
opacity: 1;
|
||
|
|
visibility: visible;
|
||
|
|
}
|
||
|
|
</style>
|