11 changed files with 596 additions and 225 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