目录

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

JAY.LIN 收录于未分类

2025-09-25 约 932 字预计阅读 2 分钟

https://bing.ee123.net/img/rand?artid=152084300

目录

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

弹窗最终效果

<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>