71 lines
1.0 KiB
Vue
71 lines
1.0 KiB
Vue
<template>
|
|
<view class="mask u-fixed tranistion position-all u-flex u-flex-col u-row-center u-col-center" v-if="show"
|
|
:style="computedStyle" @tap="maskClick">
|
|
<view class="w-full" @tap.stop="nullFunction">
|
|
<slot></slot>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup>
|
|
import {
|
|
computed,
|
|
ref
|
|
} from 'vue';
|
|
const props = defineProps({
|
|
zIndex: {
|
|
type: [Number, String]
|
|
},
|
|
tapClose: {
|
|
type: Boolean,
|
|
default: true
|
|
}
|
|
})
|
|
const emits = defineEmits(['close', 'toggle', 'open'])
|
|
let show = ref(false)
|
|
|
|
function close() {
|
|
show.value = false
|
|
emits('close')
|
|
}
|
|
|
|
function open() {
|
|
show.value = true
|
|
emits('open')
|
|
}
|
|
|
|
function nullFunction() {
|
|
|
|
}
|
|
|
|
function toggle() {
|
|
if (show.value) {
|
|
close()
|
|
} else {
|
|
open()
|
|
}
|
|
}
|
|
|
|
function maskClick() {
|
|
if (props.tapClose) {
|
|
close()
|
|
}
|
|
}
|
|
const computedStyle = computed(() => {
|
|
return `
|
|
z-index:${props.zIndex};
|
|
`
|
|
})
|
|
|
|
defineExpose({
|
|
close,
|
|
toggle,
|
|
open
|
|
})
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.mask {
|
|
background-color: rgba(51, 51, 51, .5);
|
|
}
|
|
</style> |