vent-template/src/views/vent/gas/components/modal/confirmModal.vue

<template>
  <Modal v-bind="props" @change="$emit('change', $event)">
    <slot></slot>
    <template #footer>
      <slot name="footer">
        <Button class="mr-20px" ghost @click="cancelHandler">{{ cancelText }}</Button>
        <Button type="primary" @click="okHandler">{{ okText }}</Button>
      </slot>
    </template>
  </Modal>
</template>
<script setup lang="ts">
  import { Modal, Button, ModalProps } from 'ant-design-vue';

  // const props = withDefaults(defineProps<ModalProps>(), {
  //   context: '确认操作？',
  //   cancelText: '取消',
  //   okText: '确认',
  //   centered: true,
  //   wrapClassName: 'gas-confirm-modal',
  // });

  const emit = defineEmits(['ok', 'cancel', 'update:visible', 'change']);
  function cancelHandler() {
    emit('update:visible', false);
    emit('cancel');
  }
  function okHandler() {
    emit('update:visible', false);
    emit('ok');
  }
</script>
<style lang="less">
  @import '@/design/theme.less';

  @{theme-deepblue} {
    .gas-confirm-modal {
      --image-confirm-modal: url('@/assets/images/themify/deepblue/vent/gas/confirm-modal.png');
    }
  }

  .gas-confirm-modal {
    --image-confirm-modal: url('@/assets/images/vent/gas/confirm-modal.png');
    .zxm-modal-content {
      width: 410px;
      height: 300px;
      border: none !important;
      box-shadow: none !important;
      background-color: transparent !important;
      background-image: var(--image-confirm-modal);
      background-size: 100% auto;
      background-repeat: no-repeat;

      .zxm-modal-body {
        font-size: 32px;
        padding-top: 70px;
        height: 210px;
        text-align: center;
      }
      .zxm-modal-footer {
        text-align: center;
      }
    }
  }
</style>