弹窗最终效果1templateel-dialog:visible.syncdialogVisible:close-on-click-modalfalse:close-on-press-escapefalse:show-closefalse:widthwidthappend-to-bodymodal-append-to-bodycustom-classscreen-dialog!-- 装饰性图片 --imgsrc~/assets/img/screen/dialog/border-left.pngclassborder-leftalt/imgsrc~/assets/img/screen/dialog/border-right.pngclassborder-rightalt/imgsrc~/assets/img/screen/dialog/border-top.pngclassborder-top-leftalt/imgsrc~/assets/img/screen/dialog/border-top.pngclassborder-top-rightalt/imgsrc~/assets/img/screen/dialog/border-bottom.pngclassborder-bottom-leftalt/imgsrc~/assets/img/screen/dialog/border-bottom.pngclassborder-bottom-rightalt/imgsrc~/assets/img/screen/dialog/top-left-angle.pngclasstop-left-anglealt/imgsrc~/assets/img/screen/dialog/top-right-angle.pngclasstop-right-anglealt/imgsrc~/assets/img/screen/dialog/bottom-left-angle.pngclassbottom-left-anglealt/imgsrc~/assets/img/screen/dialog/bottom-right-angle.pngclassbottom-right-anglealt/imgsrc~/assets/img/screen/dialog/top-icon.pngclasstop-iconalt/imgsrc~/assets/img/screen/dialog/bottom-icon.pngclassbottom-iconalt/imgsrc~/assets/img/screen/dialog/close.pngclassclose-iconaltclickclose/!-- 标题区域 --divclassscreen-dialog-headdivclasstitle-pnlimgclassleft-imgsrc~/assets/img/screen/dialog/right-arrow.pngalt/divclasstitle-name{{ title }}/divimgclassright-imgsrc~/assets/img/screen/dialog/left-arrow.pngalt//div/div!-- 内容区域 --divclassscreen-dialog-bodyslot/slot/div!-- 底部区域 --divclassscreen-dialog-footerslotnamefooter/slot/div/el-dialog/templatescriptexportdefault{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.dialogVisiblenewVal;},dialogVisible(newVal){if(!newVal){this.$emit(update:visible,false);}}},methods:{close(){this.dialogVisiblefalse;}}};/scriptstylelangscss.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使用方式templatescreen-dialog:titledialogTitle:visible.syncdialogVisiblewidth800px!-- 主体内容 --div这里是对话框的内容/div!-- 底部内容 --template#footerel-buttonclickdialogVisible false取消/el-buttonel-buttontypeprimaryclickhandleConfirm确认/el-button/template/screen-dialog/templatescriptimportScreenDialogfrom/components/ScreenDialog.vue;exportdefault{components:{ScreenDialog},data(){return{dialogTitle:自定义标题,dialogVisible:false};},methods:{handleConfirm(){// 处理确认逻辑this.dialogVisiblefalse;}}};/script