vue 遮罩层

 <div class="dada_false" v-show="pastShow">
      <form action="" v-show="pasterShow" class="dada_false_box" >
        <h3 style="margin-top: 8%;margin-bottom: 8%;">成功,单号{{datas}}。请务必牢记单号以便查询。</h3>
        <span @click="dada_false_box_close()" style="background:#e1e1e1;border: 1px solid #9e9e9e;width: 56px;font-size: 18px;">Close</span>
      </form>
    </div>
 data() {
      return {
        newcode:'',
        pastShow: false,//新增弹框
        pasterShow: false,//新增遮罩层
        }
     }
methods: {
 //关闭弹框跳路由
      dada_false_box_close(){
        this.pastShow = false;
        this.pasterShow = false;
        this.$router.push({
          path: '/查询',
        })
      },
     }
<style scoped>
  .dada_false{
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
    position: fixed;
    top:0;
    left: 0;
    z-index: 1;
  }
  .dada_false_box{
    width: 500px;
    height: 150px;
    background: white;
    position: fixed;
    top:0;
    bottom: 0;
    left:0;
    right: 0;
    margin:auto;
  }

你可能感兴趣的:(vue 遮罩层)