erp-el-element/Dialog/PopupMessage.vue

<template>
  <div class="popup-message warning" :class="type">
    <div class="pop-view">
      <span class="pop-title">{{ this.tips || ''}}</span>
      <p class="pop-content" v-if="this.msg">{{ this.msg }}</p>
      <div class="pop-btn" v-if="button">
        <el-button type="primary" class="save" @click="closeMessage">确定</el-button>
      </div>
      <i class="delete" @click="closeMessage"></i>
    </div>
    
  </div>
</template>
 
<script>
 
export default {
  name: 'PopupMessage',
  // props: ["timeVisible", "cfgData", "timeTitle"],
  data() {
    return {
      // 
      callback: null,
      tips: '',
      type: '',
      msg: '',
      button: false,
      duration: 0,
    };
  },
  computed: {
    //
  },
  methods: {
    getParams(options) {
      this.callBack = options.callBack;
      this.type = options.type || ''
      this.tips = options.tips || ''
      this.msg = options.msg || ''
      this.button = options.button || false
      this.duration = options.duration || 0
 
      this.changePosition()
      if(this.duration > 0){
        window.setTimeout(() => {
 
          this.$destroy(true)
          if(this.$el.parentNode){ // 当前节点是否已经被手动移除
            this.$el.parentNode.removeChild(this.$el)
          }
 
          this.changePosition()
        }, this.duration)
      }
    },
    changePosition() {
      let doc = document.body.getElementsByClassName('popup-message')
      let sum = 0;
      for(let i=0; i< doc.length; i++){
        this.$nextTick(() => {
          if(i>0){
            sum = sum + document.body.getElementsByClassName('popup-message')[i-1].clientHeight + 5
            document.body.getElementsByClassName('popup-message')[i].style = `top: ${sum}px`
          }else{
            document.body.getElementsByClassName('popup-message')[i].style = `top: 0`
          }
        })
         
      }
    },
    closeMessage(){
      this.$destroy(true)
      this.$el.parentNode.removeChild(this.$el)
      this.changePosition()
    }
    
  },
  mounted() {
  },
};
</script>
<style lang="scss" scoped>
 
.popup-message {
  font-family: "Source Han Sans Regular";
  color: #333333;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 500px;
  height: fit-content;
  border-radius: 8px;
  background: #FFFFFF;
  border: 1px solid #C2C2C2;
  z-index: 9999;
  .pop-view{
    position: relative;
    min-height: 120px;
    height: auto;
    padding-bottom: 13px;
    .pop-title{
      display: block;
      font-size: 18px;
      font-weight: 500;
      padding: 13px 52px 9px 52px;
      position: relative;
      &::before{
        position: absolute;
        content: '';
        // background-image: url('~@/assets/popup/warning.png');
        width: 22px;
        height: 22px;
        left: 20px;
      }
    }
    .pop-content{
      font-weight: 400;
      font-size: 14px;
      padding: 0 52px 5px 52px;
    }
    .pop-btn{
      display: flex;
      justify-content: flex-end;
      .save{
        margin-right: 20px;
      }
    }
    .delete{
      position: absolute;
      content: '';
    //   background-image: url('~@/assets/popup/delete.png');
      width: 22px;
      height: 22px;
      top: 18px;
      right: 23px;
    }
  }
}
.success{
  background: #F6FFED;
  border: 1px solid #73D13D;
  color: #73D13D;
  .pop-view{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
  }
  
  .pop-view>.pop-title{
    &::before{
    //   background-image: url('~@/assets/popup/success.png');
    }
  }
}
.error{
  background: #FFF1F0;
  border: 1px solid #FF7875;
  // color: #FF7875;
  .pop-view>.pop-title{
    &::before{
    //   background-image: url('~@/assets/popup/error.png');
    }
  }
}
</style>