gold-vue/src/components/dialogs/ConfirmDialog.vue

<!-- 用于审核通过、驳回的对话框 -->
<template>
  <!-- close-on-click-modal="false" 禁止点击遮罩层关闭对话框 -->
  <el-dialog 
    v-model="visible" 
    :width="width" 
    :close-on-click-modal="false" 
    :style="{
      backgroundImage: `url(${BackgroundSvg})`,
      backgroundSize: 'cover',
      backgroundPosition: 'center',
      height: '400px'
    }"
    @close="handleClose">
    
    <div class="confirm-content">
      将要{{ message }}
      <br>
    </div>
    
    <template #footer>
      <div class="dialog-footer-button">
        <el-button round class="custom-large-button" @click="handleCancel">
          取消
        </el-button>
        <el-button round class="custom-large-button" type="primary" @click="handleConfirm">
          确定
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref, watch } from 'vue'
import BackgroundSvg from '@/assets/SvgIcons/promptBackground.svg'

// 组件属性
const props = defineProps({
  // 是否显示对话框
  modelValue: {
    type: Boolean,
    default: false
  },
  // 对话框宽度
  width: {
    type: String,
    default: '700px'
  },
  // 消息内容
  message: {
    type: String,
    default: '通过该记录！'
  }
})

// 组件事件
const emit = defineEmits(['update:modelValue', 'confirm', 'cancel', 'close'])

// 内部可见性状态
const visible = ref(false)

// 监听外部modelValue变化
watch(() => props.modelValue, (newVal) => {
  visible.value = newVal
})

// 监听内部visible变化，同步到外部
watch(visible, (newVal) => {
  emit('update:modelValue', newVal)
})

// 确认按钮点击事件
const handleConfirm = () => {
  emit('confirm')
  visible.value = false
}

// 取消按钮点击事件
const handleCancel = () => {
  emit('cancel')
  visible.value = false
}

// 对话框关闭事件
const handleClose = () => {
  emit('close')
  visible.value = false
}
</script>

<style scoped>

/* 将要**的样式 */
.confirm-content {
  text-align: center;
  font-size: 40px;
  font-weight: bold;
  color: #333;
  line-height: 1.5;
  padding: 20px;
  position: absolute;
  top: 57%;
  left: 53%;
  transform: translate(-50%, -50%);
  width: 100%;
}
/* 确认取消按钮组样式 */
.dialog-footer-button {
  display: flex;
  justify-content: center;
  align-items: center;
  display: flex; 
  justify-content: center; 
  font-size: 50px;
  gap: 10px;
  height: 60px;
  margin-top: 20px;
  position: absolute;
  top: 70%;
  left: 30%;
}
/* 确认取消按钮样式 */
.custom-large-button {
  font-size: 20px !important;
  height: 40px !important;
  min-width: 40px !important;
  padding: 0 40px !important;
}
</style>