teacher-assessment/src/baseComponents/Dialog.vue

<template>
    <div class="page_dialog">
        <el-dialog 
            @close="closeDialog" 
            v-model="props.visible" 
            :width="props.width ? props.width : '420px'"
            :close-on-click-modal="false"
        >
            <div class="dialog_default">
                <slot name="default" >
                    是否确认删除？
                </slot>
            </div>
            <template #header>
            <div class="custom_header">
                <img :src="warnIcon" alt="">
                <span>{{ props.title }}</span>
            </div>
            </template>

            <template #footer>
            <el-button class="button_border_gray cancel" @click="closeDialog">取 消</el-button>
            <el-button class="button_background" :loading="props.submitLoading" @click="handleConfirm(formRef)">确 定</el-button>
            </template>
        </el-dialog>
    </div>
</template>

<script setup lang="ts">
import warnIcon from '@/assets/icon/warn.svg'
const emit  = defineEmits(['close','confirm'])
const props = defineProps({
    visible:{
        type:Boolean,
        required:true
    },
    title:{
        type:String,
        default:'提示'
    },
    submitLoading:{
      type:Boolean,
      default:false,
      required:true
    },
    width:{
        type:String,
        required:false
    }
})
const closeDialog = () => {
  emit('close')
}

const handleConfirm = ()=>{
    emit('confirm')
}
</script>


<style lang="scss" scoped>
.dialog_default{
    text-align: center;
    color: #666;
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.custom_header{
    display: flex;
    align-items: center;
    padding: 0 20px;
    gap: 10px;
    text-indent: 0;
    font-weight: bold;
    img{
        width: 25px;
    }
}


.page_dialog{
  :deep(.el-dialog){
    .el-dialog__body{
      min-height: calc(120px);
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }
}

</style>