kg-viewer/src/components/ConfirmDialog.vue

<template>
    <el-dialog
      :title="title"
      v-model="visible"
      width="30%"
      :before-close="handleClose"
    >
      <p>{{ message }}</p>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="handleCancel">取 消</el-button>
          <el-button type="primary" @click="handleConfirm">确 定</el-button>
        </span>
      </template>
    </el-dialog>
  </template>
  
  <script setup>
  import { ref, watch, toRefs } from 'vue';
  import { ElMessage } from 'element-plus';
  
  const props = defineProps({
    modelValue: {
      type: Boolean,
      default: false
    },
    title: {
      type: String,
      default: '确认操作'
    },
    objId: {
        type: String,
        default: 0
    },
    message: {
      type: String,
      default: '您确定要执行此操作吗？'
    }
  });
  
  const emit = defineEmits(['update:modelValue', 'confirm', 'cancel']);
  
  const visible = ref(props.modelValue);
  
  watch(() => props.modelValue, (newValue) => {
    visible.value = newValue;
  });
  
  const handleClose = (done) => {
    emit('update:modelValue', false);
    done();
  };
  
  const handleConfirm = () => {
    emit('confirm');
    emit('update:modelValue', false);
  };
  
  const handleCancel = () => {
    emit('cancel');
    emit('update:modelValue', false);
  };
  </script>
  
  <style scoped>
  /* 添加样式 */
  </style>