Antdesign (模态框modal通用模版组件）

<script setup lang="ts">
import { ref, reactive, computed, defineProps, defineEmits } from 'vue'

const modalBodyStyle = { //ant-modal-body的样式
  padding: '20px',
}

const visible= ref(false)

const showModal = () => {
  visible.value = true
}


</script>

<template>
  <div>
    <a-space>
      <div @click="showModal">
        <slot name="CostManagement"></slot> //插槽用于父组件占位
      </div>
    </a-space>

    <a-modal
      v-model:visible="visible"
      @ok="handleOk"
      @cancel="cancel"
      width="25%"
      :footer="null"
      :body-style="modalBodyStyle"
    >
      <template #title>
        <span class="custom-header">自定义标题</span>
      </template>
      <div class="content">
       自定义内容区域
      </div>
    </a-modal>
  </div>
</template>

<style lang="less" scoped>
.custom-header {
  font-size: 18px;
  font-weight: bold;
}
</style>