vue3.2 + ant-design-vue 全屏事件记录

<template>
  <div class="base-modal">
    <a-modal
      v-model:visible="visibleProp"
      v-bind="getBindValues"
      title="ceshi "
      :maskClosable="false"
      :wrapClassName="wrapClassName"
      :width="width"
    >
      <template #closeIcon>
        <a-space @click.stop>
          <fullscreen-outlined @click.stop="onChangeFullscreen" />
          <close-outlined @click.stop="onClose" />
        </a-space>
      </template>
      <template #[item]="data" v-for="item in Object.keys($slots)" :key="item">
        <slot :name="item" v-bind="data || {}"></slot>
      </template>
    </a-modal>
  </div>
</template>
<script setup name="BaseModal">
import { FullscreenOutlined, CloseOutlined } from '@ant-design/icons-vue'
import { computed, useAttrs } from 'vue'
const attrs = useAttrs()
const wrapClassName = ref('')
const props = defineProps({
  visible: {
    type: Boolean,
    default: false
  }
})
const emits = defineEmits(['update:visible'])
const visibleProp = computed({
  get() {
    return props.visible
  },
  set(val) {
    emits('update:visible', val)
  }
})
const fullscreen = ref(false)

function onChangeFullscreen() {
  fullscreen.value = !fullscreen.value
  wrapClassName.value = fullscreen.value ? 'full-modal' : ''
  emits('fullscreen', fullscreen.value)
}

function onClose() {
  visibleProp.value = false
}

const width = computed({
  get() {
    const { width } = attrs
    if (width) {
      if (!fullscreen.value) {
        return width
      } else {
        return '100%'
      }
    }
    return 400
  }
})

function getBindValues() {
  return {
    ...attrs
  }
}
</script>
<style lang="scss">
.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>

import BaseModal from './BaseModal'

 <BaseModal
      v-model:visible="visible"
      :width="400"
      @fullscreen="handleFullscreen"
    >
      <div :style="divStyle"></div>
    </BaseModal>

const divStyle = ref({
  height: '500px',
  border: '1px solid #e8e8e8',
  overflow: 'auto'
})

function handleFullscreen(val) {
  if (val) {
    divStyle.value.height = '100%'
  } else {
    divStyle.value.height = '500px'
  }
}