saber-grid-sys/src/components/popup.vue

<template>
  <div id="popup">
    <div class="filterbg"></div>
    <div class="popup">
      <div class="headTit" v-if="showContent">
          <dv-decoration-11 style="width: 200px;height: 60px;">{{title}}</dv-decoration-11>
      </div>
      <dv-border-box-10>
        <a href="javascript:;" class="popupClose" @click="hide"></a>
        <div class="summary">
            111
        </div>
      </dv-border-box-10>
    </div>
  </div>
</template>

<script>
  export default{
    components:{
    },
    data(){
      return{
        showContent:false,
        title:'',
        showType:'',
        detailData:null,
      }
    },
    mounted() {
      this.$nextTick(()=>{
        this.show()
      })
    },
    methods:{
      searchLine(){
        this.hide()
        this.a_searchLine&&this.a_searchLine()
      },
      show(){
        $('.filterbg').show();
        $('.popup').show();
        $('.popup').width('3px');
        $('.popup').animate({height: '76%'},400,function(){
        	$('.popup').animate({width: '82%'},400);
        });
        setTimeout(this.summaryShow,800);
      },
      hide(){
        this.showContent = false;
        $('.popupClose').css('display','none');
        $('.popup').animate({width: '3px'},400,function(){
        	$('.popup').animate({height: 0},400);
        });
        setTimeout(this.summaryHide,800);
      },
      summaryShow(){
      	$('.popupClose').css('display','block');
      	$('.summary').show();
        this.showContent = true;
      },
      summaryHide(){
      	$('.filterbg').hide();
      	$('.popup').hide();
      	$('.popup').width(0);
        // 删除判断增加的window属性
        delete window.alertIsShow;
        let tip_alert = document.getElementById('popup');
        tip_alert.parentNode.removeChild(tip_alert);
      },
    }
  }
</script>

<style lang="less">
  #popup{
    z-index: 999999999999999999;
    width: 100%;
    height: 100%;
    .border-box-content{
      padding: 0!important;
    }
    .headTit{
      z-index: 999999999999999;
      position: absolute;
      width: 100%;
      font-size: 16px;
      font-weight: bold;
      color: #25f1e5;
      display: flex;
      justify-content: center;
      padding-top: 10px;
    }
  }
</style>