55 lines
843 B
Vue
55 lines
843 B
Vue
<template>
|
|
<view
|
|
v-if="show"
|
|
class="overlay"
|
|
:class="{ 'overlay-show': show }"
|
|
@click="handleClick"
|
|
:style="{ zIndex }"
|
|
>
|
|
<slot></slot>
|
|
</view>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
const props = defineProps({
|
|
show: {
|
|
type: Boolean,
|
|
default: false,
|
|
},
|
|
zIndex: {
|
|
type: Number,
|
|
default: 10,
|
|
},
|
|
closeOnClickOverlay: {
|
|
type: Boolean,
|
|
default: true,
|
|
},
|
|
})
|
|
|
|
const emit = defineEmits(['click', 'update:show'])
|
|
|
|
const handleClick = (event: Event) => {
|
|
emit('click', event)
|
|
if (props.closeOnClickOverlay) {
|
|
emit('update:show', false)
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.overlay {
|
|
position: fixed;
|
|
top: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
left: 0;
|
|
background-color: rgba(0, 0, 0, 0.7);
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.overlay-show {
|
|
opacity: 1;
|
|
visibility: visible;
|
|
}
|
|
</style>
|