minnan-website/components/display/SimplePopup.vue

<template>
  <teleport to="body">
    <!-- 遮罩层 -->
    <div
      v-if="isClose2 || isVisible" 
      :class="[
        'popup-overlay',
        isVisible ? 'open' : '',
        isClose2 ? 'close' : '',
      ]" 
      @click="close"
    >
      <!-- 弹出框内容 -->
      <div class="popup-content" @click.stop>
        <slot />
      </div>
    </div>
  </teleport>
</template>

<script lang="ts" setup>
import { ref } from 'vue';

const emit = defineEmits([ 'change' ]);

const isVisible = ref(false);
const isClose2 = ref(false);

const open = () => {
  isClose2.value = true;
  setTimeout(() => {
    isClose2.value = false;
    isVisible.value = true;
    emit('change', true);
  }, 100);
};
const close = () => {
  isClose2.value = true;
  isVisible.value = false;
  setTimeout(() => {
    isClose2.value = false;
    emit('change', false);
  }, 300);
};

defineExpose({
  open,
  close
});
</script>

<style lang="scss">
@use "@/assets/scss/colors";

.popup-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 300;
  opacity: 0;
  transition: all 0.3s ease-in-out;

  &.open {
    opacity: 1;

    .popup-content {
      opacity: 1;
      transform: scale(1);
    }
  }
  &.close {
    pointer-events: none;

    .popup-content {
      opacity: 0;
    }
  }
}
.popup-content {
  position: relative;
  transition: all 0.3s ease-in-out;
  transform: scale(0.9);
}
</style>