5 changed files with 366 additions and 149 deletions
@ -0,0 +1,137 @@
|
||||
<template> |
||||
<div class="popupnotification"> |
||||
<el-dialog |
||||
v-model="props.modelValue" |
||||
v-bind="{ |
||||
width, |
||||
closeOnClickModal, |
||||
showClose, |
||||
}" |
||||
> |
||||
<!-- 标题 --> |
||||
<template #title> |
||||
<div class="el_dialog_title"> |
||||
<el-icon><WarnTriangleFilled /></el-icon> |
||||
<span>{{ title }}</span> |
||||
</div> |
||||
</template> |
||||
|
||||
<el-text class="mx-1" size="large" |
||||
>请<strong>仔细阅读</strong>以下内容，此操作<strong>不可撤销</strong>！</el-text |
||||
> |
||||
|
||||
<!-- 内容主体 --> |
||||
<div class="el_content"> |
||||
<el-icon class="el_content_icon"><InfoFilled /></el-icon> |
||||
<slot name="content"></slot> |
||||
</div> |
||||
|
||||
<!-- 页脚 --> |
||||
<template #footer> |
||||
<div class="dialog-footer"> |
||||
<el-button @click="onClose">{{ cancelButtonText }}</el-button> |
||||
<el-button @click="onConfirm" class="el_delte_button" type="primary"> |
||||
<el-icon><QuestionFilled /></el-icon>{{ confirmButtonText }} |
||||
</el-button> |
||||
</div> |
||||
</template> |
||||
</el-dialog> |
||||
</div> |
||||
</template> |
||||
|
||||
<script setup> |
||||
import { defineProps, defineEmits } from 'vue'; |
||||
|
||||
const props = defineProps({ |
||||
width: { |
||||
type: String, |
||||
default: '500', |
||||
validator: value => !isNaN(Number(value)), // 确保宽度是数值型字符串 |
||||
}, |
||||
closeOnClickModal: { |
||||
type: Boolean, |
||||
default: false, |
||||
}, |
||||
showClose: { |
||||
type: Boolean, |
||||
default: false, |
||||
}, |
||||
title: { |
||||
type: String, |
||||
default: '删除警告提示！', |
||||
}, |
||||
cancelButtonText: { |
||||
type: String, |
||||
default: '关闭窗口', |
||||
}, |
||||
confirmButtonText: { |
||||
type: String, |
||||
default: '确定删除', |
||||
}, |
||||
confirmLoading: { |
||||
type: Boolean, |
||||
default: true, |
||||
}, |
||||
modelValue: { |
||||
type: Boolean, |
||||
default: false, |
||||
}, |
||||
}); |
||||
|
||||
const emit = defineEmits(['close', 'confirm']); |
||||
|
||||
const onClose = () => { |
||||
emit('close'); |
||||
}; |
||||
|
||||
const onConfirm = () => { |
||||
emit('confirm'); |
||||
}; |
||||
</script> |
||||
|
||||
<style scoped lang="scss"> |
||||
.popupnotification { |
||||
:deep(.el-dialog) { |
||||
border: 1px dashed #f44336; |
||||
border-radius: 6px; |
||||
.el_dialog_title { |
||||
display: flex; |
||||
box-shadow: 0px 1px #f44336 !important; |
||||
align-items: center; |
||||
border-bottom: 1px solid #ff5722; |
||||
border-radius: 1.25em; |
||||
padding: 0 0.25em; |
||||
i { |
||||
color: #ff0000; |
||||
margin-right: 0.5em; |
||||
} |
||||
} |
||||
.el_delte_button { |
||||
color: white; |
||||
background-color: #f44336; |
||||
border: 1px solid #e91e63; |
||||
span { |
||||
align-items: flex-end; |
||||
} |
||||
} |
||||
.el-dialog__body { |
||||
padding-top: 0.5em; |
||||
} |
||||
|
||||
.el_content { |
||||
margin-top: 1em; |
||||
border: 1px dashed #f44336; |
||||
padding: 2em; |
||||
border-radius: 0.25em; |
||||
position: relative; |
||||
.el_content_icon { |
||||
position: absolute; |
||||
top: -0.8em; |
||||
right: -0.5em; |
||||
font-size: 1.5em; |
||||
color: #f44336; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
</style> |
||||
Loading…
Reference in new issue