ant-design-vue/components/modal/demo/fullscreen.vue

<docs>
---
order: 0
title:
  zh-CN: 全屏
  en-US: full screen
---

## zh-CN

使用样式定义一个全屏弹窗

## en-US

Full screen by custom style.

</docs>

<template>
  <div>
    <a-button type="primary" @click="showModal">Open Modal</a-button>
    <a-modal
      v-model:open="open"
      title="Basic Modal"
      width="100%"
      wrap-class-name="full-modal"
      @ok="handleOk"
    >
      <p>Some contents...</p>
      <p>Some contents...</p>
      <p>Some contents...</p>
    </a-modal>
  </div>
</template>
<script lang="ts">
import { defineComponent, ref } from 'vue';
export default defineComponent({
  setup() {
    const open = ref<boolean>(false);

    const showModal = () => {
      open.value = true;
    };

    const handleOk = (e: MouseEvent) => {
      console.log(e);
      open.value = false;
    };
    return {
      open,
      showModal,
      handleOk,
    };
  },
});
</script>
<style lang="less">
.full-modal {
  .ant-modal {
    max-width: 100%;
    top: 0;
    padding-bottom: 0;
    margin: 0;
  }
  .ant-modal-content {
    display: flex;
    flex-direction: column;
    height: calc(100vh);
  }
  .ant-modal-body {
    flex: 1;
  }
}
</style>