PPT/src/components/ConfirmDialog2.vue

<template>
  <Modal
    :visible="visible"
    :width="width"
    :contentStyle="{ borderRadius: '15px' }"
    :closeButton="false"
    :closeOnClickMask="false"
    :closeOnEsc="false"
    @update:visible="handleVisibleChange"
  >
    <div class="clear-confirm">
      <div class="clear-confirm__title">{{ title }}</div>
      <div class="clear-confirm__content">
        {{ content }}
      </div>
      <div class="clear-confirm__footer">
        <div class="btn-c" @click="handleCancel">{{ cancelText }}</div>
        <div class="btn-c confirm" @click="handleConfirm">{{ confirmText }}</div>
      </div>
    </div>
  </Modal>
</template>

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

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

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>
.btn-c {
  display: inline-block;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  background: #FFF;
  border: 1px solid #DCDFE6;
  color: #606266;
  text-align: center;
  box-sizing: border-box;
  outline: 0;
  margin: 0;
  transition: .1s;
  font-weight: 500;
  padding: 12px 20px;
  font-size: 14px;
  border-radius: 10px;

  +.btn-c {
    margin-left: 10px;
  }

  &.confirm {
    background: #FF9400;
    color: white;
    border: 1px solid #FF9400;

    &:hover {
      background: #FFA500;
    }
  }
}
</style>