uniapp 弹窗封装（上、下、左、右、中五个方位）

无脑复制即可！！！

<template><view><viewv-if="mask"class="tui-drawer-mask":class="{ 'tui-drawer-mask_show': visible }":style="{ zIndex: maskZIndex }"@tap="handleMaskClick"@touchmove.stop.prevent="moveHandle"></view><viewclass="tui-drawer-container":class="[`tui-drawer-container_${mode}`, visible ? `tui-drawer-${mode}__show` : '']":style="{ zIndex: zIndex, backgroundColor: backgroundColor }"@touchmove.stop.prevent="moveHandle"><slot></slot></view></view>
</template><script>
/*** 超过一屏时插槽使用scroll-view**/
export default {name: 'customDrawer',emits: ['close'],props: {visible: {type: Boolean,default: false},mask: {type: Boolean,default: true},maskClosable: {type: Boolean,default: true},// center left right bottom topmode: {type: String,default: 'center'},//drawer z-indexzIndex: {type: [Number, String],default: 990},//mask z-indexmaskZIndex: {type: [Number, String],default: 980},backgroundColor: {type: String,default: '#fff'}},methods: {moveHandle() {return false;},handleMaskClick() {if (!this.maskClosable) {return;}this.$emit('close', {});}}
};
</script><style scoped>
.tui-drawer-mask {opacity: 0;visibility: hidden;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;
}
.tui-drawer-mask_show {display: block;visibility: visible;opacity: 1;
}.tui-drawer-container {position: fixed;height: 100.2%;transform-origin: center;transition: all 0.3s ease-in-out;opacity: 0;overflow-y: scroll;-webkit-overflow-scrolling: touch;-ms-touch-action: pan-y cross-slide-y;-ms-scroll-chaining: none;-ms-scroll-limit: 0 50 0 50;
}.tui-drawer-container_center {top: 50%;left: 50%;height: auto;transform: translate3d(-50%, -50%, 0) scale(0);
}.tui-drawer-container_left {left: 0;top: 50%;transform: translate3d(-100%, -50%, 0);
}.tui-drawer-container_right {right: 0;top: 50%;transform: translate3d(100%, -50%, 0);
}.tui-drawer-container_bottom,
.tui-drawer-container_top {width: 100%;height: auto !important;min-height: 20rpx;transform-origin: center;transition: all 0.3s ease-in-out;
}.tui-drawer-container_bottom {bottom: 0;left: 0;transform: translate3d(0, 100%, 0);
}.tui-drawer-container_top {top: 0;left: 0;transform: translate3d(0, -100%, 0);
}.tui-drawer-center__show {opacity: 1;transform: translate3d(-50%, -50%, 0) scale(1);
}.tui-drawer-left__show,
.tui-drawer-right__show {opacity: 1;transform: translate3d(0, -50%, 0);
}
.tui-drawer-top__show,
.tui-drawer-bottom__show {opacity: 1;transform: translate3d(0, 0, 0);
}
</style>

页面中使用

<template><custom-drawer mode="" :zIndex="" :maskZIndex="" :visible="" backgroundColor="" :mask="" @close=""><view>你的插槽内容</view></custom-drawer>
</template><script>
import customDrawer from '封装的组件路径.vue';export default {components: {customDrawer}
}
</script>