vue3 antd 全屏对话框

Vue3 antd 全屏对话框，可以让用户在整个屏幕上展示对话框内容，提供更好的用户体验。在 antd-vue 中，你可以通过 `Modal` 组件来实现全屏对话框。

具体使用方法如下：

1. 在需要使用的组件中引入 `Modal` 组件

import { Modal } from 'ant-design-vue';

2. 在 `data` 中定义需要传递给 `Modal` 组件的数据

data() {
  return {
    modalVisible: false,
    modalTitle: '',
    modalContent: ''
  }
}

3. 在模板中使用 `Modal` 组件

<template>
  <div>
    <a-button type="primary" @click="handleOpenModal">打开全屏对话框</a-button>
    <a-modal :visible="modalVisible" :title="modalTitle" @cancel="handleCancel" :body-style="{height: 'calc(100vh - 108px)'}">
      {{ modalContent }}
    </a-modal>
  </div>
</template>

4. 在 `methods` 中定义打开和关闭对话框的方法

methods: {
  handleOpenModal() {
    this.modalVisible = true;
    this.modalTitle = '全屏对话框标题';
    this.modalContent = '全屏对话框内容';
  },
  handleCancel() {
    this.modalVisible = false;
  }
}

其中，`body-style="{height: 'calc(100vh - 108px)'}"` 的作用是让对话框内容高度自适应屏幕高度，同时减去头部和底部的高度，保证内容不会被遮挡。