123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122 |
- <template>
- <div
- v-if="isOverlayShow"
- ref="overlayDomRef"
- class="overlay-container"
- :style="{
- position: props.isFullScreen ? 'fixed' : 'absolute',
- zIndex: props.zIndex,
- }"
- >
- <div
- v-if="props.useMask"
- :class="{
- 'overlay-mask': true,
- 'fade-in': props.visible,
- }"
- :style="{
- backgroundColor: props.maskColor,
- }"
- @click="onOverlayClick"
- @touchstart.prevent.stop="onOverlayClick"
- />
- <div
- :class="{
- 'overlay-content': true,
- 'full-screen': props.isFullScreen,
- }"
- >
- <slot />
- </div>
- </div>
- </template>
- <script setup lang="ts">
- import { ref, watch, withDefaults } from '../../../adapter-vue';
- export interface IOverlayProps {
- visible?: boolean;
- zIndex?: number | undefined;
- useMask?: boolean | undefined;
- maskColor?: string | undefined;
- isFullScreen?: boolean | undefined;
- width?: string;
- height?: string;
- }
- const emits = defineEmits(['onOverlayClick']);
- const props = withDefaults(defineProps<IOverlayProps>(), {
- visible: true,
- zIndex: 9999,
- useMask: true,
- isFullScreen: true,
- maskColor: 'rgba(0, 0, 0, 0.6)',
- width: 'auto',
- height: 'auto',
- });
- const overlayDomRef = ref<HTMLElement>();
- const isOverlayShow = ref<boolean>(props.visible);
- watch(() => props.visible, (visible: boolean) => {
- if (visible) {
- isOverlayShow.value = true;
- } else {
- setTimeout(() => {
- isOverlayShow.value = false;
- }, 150);
- }
- }, {
- immediate: true,
- });
- function onOverlayClick() {
- emits('onOverlayClick');
- }
- defineExpose({
- overlayDomRef,
- });
- </script>
- <style scoped lang="scss">
- .overlay-container {
- position: fixed;
- top: 0;
- bottom: 0;
- left: 0;
- right: 0;
- z-index: 9999;
- display: flex;
- align-items: center;
- justify-content: center;
- .overlay-mask {
- z-index: -1;
- position: absolute;
- top: 0;
- left: 0;
- right: 0;
- bottom: 0;
- background-color: rgba(0, 0, 0, 0.6);
- opacity: 0;
- transition: opacity 0.15s linear;
- animation: fade-in 0.15s linear;
- }
- }
- .overlay-mask.fade-in {
- opacity: 1;
- }
- @keyframes fade-in {
- 0% {
- opacity: 0;
- }
- 100% {
- opacity: 1;
- }
- }
- </style>
|