vue3 overlay组件

vue文件

<template>
  <transition name="overlay">
    <div class="overlay" v-if="show" @click="close">
      <div @click.stop="">
        <slot> </slot>
      </div>
    </div>
  </transition>
</template>

<script lang="ts" setup>
import { ref } from "vue";
const emit = defineEmits(["update:show"]);
const props = defineProps({
  show: {
    type: Boolean,
    default: false,
  },
});

const modalShow = ref(false);
const close = () => {
  emit("update:show", false)
}
</script>
<style lang="scss" scoped>
.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}

.overlay-enter-active,
.overlay-leave-active {
  transition: opacity 0.5s ease;
}

.overlay-enter-from,
.overlay-leave-to {
  opacity: 0;
}
</style>

用法

<Overlay v-model:show="showModal"></Overlay>
import Overlay from '@/components/Overlay/index.vue'