当前位置：首页 > news >正文

二次封装科技风大屏element-ui弹窗

news 2025/9/26 9:00:43

弹窗最终效果

在这里插入图片描述

<template><el-dialog:visible.sync="dialogVisible":close-on-click-modal="false":close-on-press-escape="false":show-close="false":width="width"append-to-bodymodal-append-to-bodycustom-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>