vue做弹出框红包，首次加载页面可以显示，第二次打开隐藏

<template>
	<div class="dialog-wrapper" v-if="ifImg">
      <el-dialog
        :close-on-click-modal="false"
        :close-on-press-escape="false"
        width="30%"
        :show-close="false"
        custom-class="elDialog"
        :visible.sync="dialogVisible"
        :before-close="handleClose"
      >
      <!--点击图片时跳转-->
        <img :src="indexImg" @click="linkImg" />
        <div class="el-close">
          <i class="el-icon-error" @click="dialogVisible = false"></i>
        </div>
      </el-dialog>
    </div>
</template>
<script>
 data() {
    return {
      // 判断有没有宣传图
      ifImg: false,
      //图片路径
      indexImg: "",
      //点击红包时跳转路径
      indexro: "",
      // 控制红包的
      dialogVisible: false,
      		}
      }
	created(){
		this.getImage();
	},
	methods: {
	    // 点击宣传图片跳转页面
	    linkImg() {
	      window.open(this.indexro, "_blank"); // 新窗口打开外链接
	    },
	    getImage() {
	    	//判断sessionStorage是否含有userfirst，若为null，则第一次打开该页面，可以向后台发送请求，获取图片
	      if (window.sessionStorage.getItem("userfirst") == null) {
	        this.getJSON("后端接口地址").then((res) => {
	        //返回的为数组，若为空的话，是后端未设置该功能
	          if (res.data.length > 0) {
	          //isEnable根据后台数据判断是否需要展示弹出红包
	            if (res.data[0].isEnable) {
	            //在sessionStorage中存储会话级别的userfirst
	              window.sessionStorage.setItem("userfirst", 0);
	              //显示红包弹框
	              this.dialogVisible = true;
	              //显示el-dialog弹框
	              this.ifImg = true;
	              //给参数赋值
	              this.indexImg = res.data[0].picture;
	              this.indexro = res.data[0].link;
	            }
	          } else {
	            this.ifImg = false;
	          }
	        });
	      }
	    },
	    // 点击红包
	    handleClose() {
	      this.dialogVisible = false;
	    },
	    //发送请求
	    getJSON(url) {
		  return new Promise((resolve, reject) => {
		    var xhr = new XMLHttpRequest();
		    xhr.open("GET", url, true);
		    xhr.setRequestHeader("Content-type", "application/json");
		    xhr.onreadystatechange = function () {
		      if (this.readyState === 4) {
		        if (this.status === 200) {
		          resolve(JSON.parse(this.responseText), this);
		        } else {
		          let resJson = { code: this.status, response: this.response };
		          reject(resJson, this);
		        }
		      }
		    };
		    xhr.send();
		  });
		}
	  }
</script>


<style scoped lang="scss">
/*修改element中el-dialog自带的默认属性*/
.dialog-wrapper {
  margin-top: 0;
  /deep/ .el-dialog__wrapper {
    display: flex;
    align-items: center;
    .el-dialog {
      margin: 0 auto   !important;;
      background-color: rgba(0, 0, 0, 0) !important;
      box-shadow:0 0 0 0;
      .el-dialog__body {
        padding: 0px;
        /*去掉默认背景色*/
      	background-color: rgba(0, 0, 0, 0) !important;
        box-sizing: border-box;
      }
      .el-dialog__header {
        padding: 0px;
      }
    }
  }
}
.elDialog {
  height: 100%;
  img {
    width: 100%;
    height: 100%;
  }
  img:hover{
    cursor:pointer;
  }
  .el-close {
    position: absolute;
    width: 50px;
    height: 50px;
    top: -70px;
    right: -80px;
    font-size: 30px;
    text-align: center;
    line-height: 80px;
    color: rgb(165, 142, 142);
  }
}
</style>