BoundLink-Plate-UI/src/components/BsUi/Modal/Modal.vue

<template>
  <a-modal wrapClassName="bs-modal" :bodyStyle="bodyStyle" :open="visible" :title="title" centered :width="width" v-bind="modalExtraProps">
    <slot v-if="visible" />
  </a-modal>
</template>

<script setup>
  import { computed } from 'vue';

  defineProps({
    width: {
      required: true,
      default: '500px',
    },
    visible: {
      required: true,
      default: false,
    },
    title: {
      required: true,
      default: '标题',
    },
    modalExtraProps: {
      required: false,
      default: {},
    },
  });

  const bodyStyle = computed(() => {
    return {
      maxHeight: `calc(100vh - 300px)`,
      overflow: 'auto',
    };
  });
</script>
<style lang="scss" scoped>
  .bs-modal {
    :deep(.ant-modal-content) {
      background-color: #f8f8f8;
    }
  }
</style>