弹窗最终效果
<template>
<el-dialog
:visible.sync="dialogVisible"
:close-on-click-modal="false"
:close-on-press-escape="false"
:show-close="false"
:width="width"
append-to-body
modal-append-to-body
custom-class="screen-dialog"
>
<!-- 装饰性图片 -->
<img src="~@/assets/img/screen/dialog/border-left.png" class="border-left" alt="" />
<img src="~@/assets/img/screen/dialog/border-right.png" class="border-right" alt="" />
<img src="~@/assets/img/screen/dialog/border-top.png" class="border-top-left" alt="" />
<img src="~@/assets/img/screen/dialog/border-top.png" class="border-top-right" alt="" />
<img src="~@/assets/img/screen/dialog/border-bottom.png" class="border-bottom-left" alt="" />
<img src="~@/assets/img/screen/dialog/border-bottom.png" class="border-bottom-right" alt="" />
<img src="~@/assets/img/screen/dialog/top-left-angle.png" class="top-left-angle" alt="" />
<img src="~@/assets/img/screen/dialog/top-right-angle.png" class="top-right-angle" alt="" />
<img src="~@/assets/img/screen/dialog/bottom-left-angle.png" class="bottom-left-angle" alt="" />
<img src="~@/assets/img/screen/dialog/bottom-right-angle.png" class="bottom-right-angle" alt="" />
<img src="~@/assets/img/screen/dialog/top-icon.png" class="top-icon" alt="" />
<img src="~@/assets/img/screen/dialog/bottom-icon.png" class="bottom-icon" alt="" />
<img src="~@/assets/img/screen/dialog/close.png" class="close-icon" alt="" @click="close" />
<!-- 标题区域 -->
<div class="screen-dialog-head">
<div class="title-pnl">
<img class="left-img" src="~@/assets/img/screen/dialog/right-arrow.png" alt="" />
<div class="title-name">{{ title }}</div>
<img class="right-img" src="~@/assets/img/screen/dialog/left-arrow.png" alt="" />
</div>
</div>
<!-- 内容区域 -->
<div class="screen-dialog-body">
<slot></slot>
</div>
<!-- 底部区域 -->
<div class="screen-dialog-footer">
<slot name="footer"></slot>
</div>
</el-dialog>
</template>
<script>
export default {
name: 'ScreenDialog',
props: {
title: {
type: String,
default: '标题'
},
width: {
type: String,
default: '1200px'
},
visible: {
type: Boolean,
default: false
}
},
data() {
return {
dialogVisible: this.visible
};
},
watch: {
visible(newVal) {
this.dialogVisible = newVal;
},
dialogVisible(newVal) {
if (!newVal) {
this.$emit('update:visible', false);
}
}
},
methods: {
close() {
this.dialogVisible = false;
}
}
};
</script>
<style lang="scss">
.screen-dialog {
background: transparent;
box-shadow: none;
.el-dialog__header {
display: none;
}
.el-dialog__body {
background: url("~@/assets/img/screen/dialog/body-bg.png") no-repeat;
background-size: 100% 100%;
background-origin: content-box;
padding: 37px 33px 53px;
position: relative;
// 左边框
.border-left {
width: 33px;
// 100% - 左上角标高度 - 左下角标高度
height: calc(100% - 37px - 53px);
position: absolute;
left: 0;
top: 37px;
}
// 右边框
.border-right {
width: 33px;
// 100% - 右上角标高度 - 右下角标高度
height: calc(100% - 37px - 53px);
position: absolute;
right: 0;
top: 37px;
}
// 上边框
.border-top-left {
height: 37px;
// 100% - 左上角标宽度 - 右上角标宽度 - 中间图标宽度
width: calc((100% - 33px - 33px - 236px) / 2);
position: absolute;
top: 0;
left: 33px;
}
// 上边框
.border-top-right {
height: 37px;
// 100% - 左上角标宽度 - 右上角标宽度 - 中间图标宽度
width: calc((100% - 33px - 33px - 236px) / 2);
position: absolute;
top: 0;
right: 33px;
}
// 下边框
.border-bottom-left {
height: 53px;
// 100% - 左下角标宽度 - 右下角标宽度 - 中间图标宽度
width: calc((100% - 33px - 33px - 166px) / 2);
position: absolute;
bottom: 0;
left: 33px;
}
// 下边框
.border-bottom-right {
height: 53px;
// 100% - 左下角标宽度 - 右下角标宽度 - 中间图标宽度
width: calc((100% - 33px - 33px - 166px) / 2);
position: absolute;
bottom: 0;
right: 33px;
}
// 左上角标
.top-left-angle {
width: 33px;
height: 37px;
position: absolute;
top: 0;
left: 0;
}
// 左下角标
.bottom-left-angle {
width: 33px;
height: 53px;
position: absolute;
bottom: 0;
left: 0;
}
// 右上角标
.top-right-angle {
width: 33px;
height: 37px;
position: absolute;
top: 0;
right: 0;
}
// 右下角标
.bottom-right-angle {
width: 33px;
height: 53px;
position: absolute;
bottom: 0;
right: 0;
}
.top-icon {
width: 236px;
height: 39px;
position: absolute;
top: -2px;
left: 50%;
transform: translateX(-50%);
}
.bottom-icon {
width: 166px;
height: 51px;
position: absolute;
bottom: 2px;
left: 50%;
transform: translateX(-50%);
}
// 关闭按钮
.close-icon {
width: 24px;
height: 24px;
position: absolute;
top: 20px;
right: 20px;
cursor: pointer;
z-index: 1;
}
// 头部标题
.screen-dialog-head {
.title-pnl {
display: flex;
justify-content: center;
align-items: center;
column-gap: 20px;
padding: 0px 40px;
background: linear-gradient(
90deg,
rgba(7, 47, 93, 0.2) 0%,
rgba(7, 47, 93, 1) 50%,
rgba(7, 47, 93, 0.2) 100%
);
.left-img,
.right-img {
width: 13px;
height: 10px;
}
.title-name {
font-size: 26px;
font-family: "you-she-biao-ti-hei";
color: #ffffff;
height: 40px;
line-height: 40px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
}
}
.screen-dialog-body {
min-height: 400px;
}
}
</style>使用方式
<template>
<screen-dialog
:title="dialogTitle"
:visible.sync="dialogVisible"
width="800px"
>
<!-- 主体内容 -->
<div>
这里是对话框的内容
</div>
<!-- 底部内容 -->
<template #footer>
<el-button @click="dialogVisible = false">取消</el-button>
<el-button type="primary" @click="handleConfirm">确认</el-button>
</template>
</screen-dialog>
</template>
<script>
import ScreenDialog from '@/components/ScreenDialog.vue';
export default {
components: {
ScreenDialog
},
data() {
return {
dialogTitle: '自定义标题',
dialogVisible: false
};
},
methods: {
handleConfirm() {
// 处理确认逻辑
this.dialogVisible = false;
}
}
};
</script>
浙公网安备 33010602011771号