PPT/src/components/ConfirmDialog.vue

<template>
  <Modal
    :visible="visible"
    :width="width"
    :closeButton="false"
    :closeOnClickMask="closeOnClickMask"
    :closeOnEsc="closeOnEsc"
    @update:visible="handleVisibleChange"
  >
    <div class="confirm-dialog">
      <div class="confirm-dialog__title">{{ title }}</div>
      <div class="confirm-dialog__content">
        <slot>{{ content }}</slot>
      </div>
      <div class="confirm-dialog__footer">
        <Button type="default" @click="handleCancel">{{ cancelText }}</Button>
        <Button type="primary" @click="handleConfirm">{{ confirmText }}</Button>
      </div>
    </div>
  </Modal>
</template>

<script lang="ts" setup>
import Modal from '@/components/Modal.vue'
import Button from '@/components/Button.vue'

const props = withDefaults(defineProps<{
  visible: boolean
  title?: string
  content?: string
  confirmText?: string
  cancelText?: string
  width?: number
  closeOnClickMask?: boolean
  closeOnEsc?: boolean
}>(), {
  title: '提示',
  content: '',
  confirmText: '确认',
  cancelText: '取消',
  width: 420,
  closeOnClickMask: false,
  closeOnEsc: false,
})

const emit = defineEmits<{
  (event: 'update:visible', payload: boolean): void
  (event: 'confirm'): void
  (event: 'cancel'): void
}>()

const handleVisibleChange = (val: boolean) => {
  emit('update:visible', val)
}

const handleConfirm = () => {
  emit('confirm')
  emit('update:visible', false)
}

const handleCancel = () => {
  emit('cancel')
  emit('update:visible', false)
}
</script>

<style lang="scss" scoped>
.confirm-dialog {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.confirm-dialog__title {
  font-size: 16px;
  font-weight: 500;
  color: #333;
}

.confirm-dialog__content {
  font-size: 14px;
  color: #666;
  line-height: 1.5;
}

.confirm-dialog__footer {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}
</style>