自定义组件：幕布

涉及的效果：点击出现幕布并且内容可变动

使用的技术：vue3的slot + component+components

curtain（组件页面）：

<template>
  <div class="curtain">
    <slot></slot>
  </div>
</template>

<script setup lang="ts">

</script>

<style scoped>
.curtain {
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0px;
  left: 0px;
  background-color: rgba(0, 0, 0, 0.3);
}
</style>

min.ts：

import { createApp } from 'vue';
import App from './App.vue';
import curtain from '@/components/curtain.vue';

createApp(App).component('curtain', curtain).mount('#app');

页面使用：

<curtain>
      11
</curtain>

效果：