用vue3封装一个全屏弹窗

A：

首先，需要在Vue项目中安装ElementUI组件库，用于实现弹窗的样式。

安装ElementUI：

npm i element-plus -S

创建一个全屏弹窗组件FullScreenDialog.vue，代码如下：

<template>
  <div class="full-screen-dialog-mask" v-show="visible">
    <div class="full-screen-dialog">
      <div class="full-screen-dialog-header">
        <span>{{ title }}</span>
        <i class="el-icon-close" @click="close"></i>
      </div>
      <div class="full-screen-dialog-body">
        <slot></slot>
      </div>
    </div>
  </div>
</template>

<script>
import { reactive } from 'vue';

export default {
  name: 'FullScreenDialog',
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    title: {
      type: String,
      default: '全屏弹窗',
    },
  },
  setup(props, { emit }) {
    const state = reactive({});

    const close = () => {
      emit('update:visible', false);
    };

    return {
      state,
      close,
    };
  },
};
</script>

<style>
.full-screen-dialog-mask {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
}

.full-screen-dialog {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 1001;
  width: 80%;
  max-height: 90%;
  transform: translate(-50%, -50%);
  background-color: #fff;
  border-radius: 5px;
  overflow: auto;
}

.full-screen-dialog-header {
  display: flex;
  justify-content: space-between;
  padding: 10px;
  border-bottom: 1px solid #ebeef5;
}

.full-screen-dialog-header span {
  font-size: 16px;
}

.full-screen-dialog-body {
  padding: 20px;
}
</style>

然后，可以在需要使用全屏弹窗的组件中引入并使用FullScreenDialog组件，代码如下：

<template>
  <div>
    <el-button type="primary" @click="dialogVisible = true">打开全屏弹窗</el-button>
    <full-screen-dialog title="全屏弹窗" v-model:visible="dialogVisible">
      <div>这是全屏弹窗的内容</div>
    </full-screen-dialog>
  </div>
</template>

<script>
import FullScreenDialog from '@/components/FullScreenDialog.vue';

export default {
  components: {
    FullScreenDialog,
  },
  data() {
    return {
      dialogVisible: false,
    };
  },
};
</script>

这样就实现了一个简单的全屏弹窗组件，用户点击打开按钮时，会弹出全屏弹窗，点击关闭按钮或者遮罩层时，会关闭弹窗。