65 lines
1.3 KiB
Vue
65 lines
1.3 KiB
Vue
<template>
|
|
<uni-popup ref="popup" :type="props.dir" :is-mask-click="false" mask-background-color="rgba(0,0,0,0.5)">
|
|
<view class="Mask" id="msk" :style="{ alignItems: position[type] }" @tap.stop="maskClose($event)">
|
|
<view class="wrapper" @tap.stop>
|
|
<slot></slot>
|
|
</view>
|
|
</view>
|
|
</uni-popup>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref, reactive } from "vue"
|
|
const emits = defineEmits(["onClose", "onOpen"])
|
|
const props = defineProps({
|
|
dir: {
|
|
type: String,
|
|
default: "bottom",
|
|
},
|
|
type: {
|
|
type: String,
|
|
default: "bottom",
|
|
},
|
|
mask: {
|
|
type: Boolean,
|
|
default: false,
|
|
},
|
|
})
|
|
const position = reactive({
|
|
bottom: "flex-end",
|
|
top: "flex-start",
|
|
center: "center",
|
|
})
|
|
const popup = ref()
|
|
const close = () => {
|
|
emits("onClose")
|
|
popup.value.close()
|
|
}
|
|
const open = () => {
|
|
emits("onOpen")
|
|
popup.value.open()
|
|
}
|
|
const maskClose = (e) => {
|
|
if (props.mask) return
|
|
if (e.target.id === "msk") return close()
|
|
}
|
|
|
|
defineExpose({ open, close })
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.Mask {
|
|
position: relative;
|
|
z-index: 999999999;
|
|
display: flex;
|
|
justify-content: center;
|
|
width: 100vw;
|
|
height: 100vh;
|
|
// background: rgba(0, 0, 0, 0.5);
|
|
// backdrop-filter: blur(30rpx);
|
|
.wrapper {
|
|
flex: 1;
|
|
}
|
|
}
|
|
</style>
|