alert组件关闭跳转页面，页面无法滚动（Vue）

• Z时代
• 2024-01-10
• 分类：综合

alert组件：

<template>
    <div class="alertBox" :value="value" v-if="visible" @click="close_click" style="z-index: 999;">
        <div class="alertMain" @click.stop>
            <van-icon name="cross" size="20px" class="closeBtn" @click="close_click"/>
            <div class="alertInfo">
                <slot name="notice"></slot>
            </div>
      <div class="btnGroup flex jc-sb">
        <div :class="['btn',lbtnName && rbtnName?'unable':'']" v-if="lbtnName" @click="left_click">{{lbtnName}}</div>
              <div class="btn active" v-if="rbtnName" @click="right_click">{{rbtnName}}</div>
      </div>
        </div>
    </div>
</template>
<script>
import {Icon} from 'vant';
export default{
  components: {
    [Icon.name]: Icon,
  },
    props: {
        value: {
      type: Boolean,
      default: false
    },
    lbtnName: {
      type: String,
            default: ''
    },
        rbtnName: {
            type: String,
            default: ''
        }
    },
    data(){
        return{
            //显示标识
      visible: false
        }
    },
    methods: {
        close_click(){
            this.$emit('close_click');
    },
    left_click(){
            this.$emit('left_click');
        },
        right_click(){
            this.$emit('right_click');
        }
    },
    watch: {
    value: {
      handler(bool){
        this.visible = bool;
      },
      immediate: true,
    },
    visible(val){
      let douEl = document.documentElement;
      if(val){
        douEl.style.overflow = 'hidden';
      }else{
        douEl.style.overflow = '';
      }
      this.$emit('input', val);
    }
  },
}
</script>
<style lang='scss' scoped>
/*弹窗*/
@mixin ls($ls: 1px){
  letter-spacing: $ls;
}
@mixin ti($ti: 1px){
  text-indent: 1px;
}
.alertBox{
    width: 100vw;
    height: 100vh;
    background: rgba(0,0,0,0.3);
    position: fixed;
    top: 0;
    left: 0;
  z-index: 999;
  .alertMain{
    width: 308px;
    min-height: 144px;
    background: #fff;
    border-radius: 5px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    text-align: center;
    @include ls(2px);
    @include ti(2px);
    padding-bottom: 16px;
    box-sizing: border-box;
    color: #6E6E6E;
    .closeBtn{
      position: absolute;
      right: 7px;
      top: 7px;
      color: #979797;
    }
    .alertInfo{
      padding: 45px 0 35px;
      font-size: 13px;
    }
    .btnGroup{
      padding: 0 24px;
    }
    .btn{
      flex: 1;
      -webkit-flex: 1;
      height: 27px;
      line-height: 27px;
      text-align: center;
      border-radius: 5px;
      color: #8B6DDB;
      border: 1px solid;
      font-size: 12px;
      box-sizing: border-box;
      @include ls;
      @include ti;
      &.unable{
        margin-right: 9px;
      }
      &.active{
        background:rgba(110,72,209,0.8);
        border: 1px solid #8B6DDB;
        color: #fff;
      }
    }
  }
}
</style>

父组件通过一个变量控制alert组件的显示与隐藏

<v-alert
      v-model="postErr" 
      lbtn-name="再逛逛"
      rbtn-name="去定制"
      @close_click="closeErr"
      @left_click="seeAgain"
      @right_click="toCustom"
    >
      <div slot="notice">
	<p>商品库存不足,</p>
        <p>去定制商场查看更多商品</p>
      </div>
    </v-alert>

data() {
    return {
      postErr: false,
    };
  },

通过按钮点击显示alert组件

 submitOrder(){this.postErr = true;}

点击 “再逛逛“ 按钮跳转页面

seeAgain(){
      this.postErr = false;
      this.$router.go(-1);
},

【注意】

这里跳转页面使用go(-1) 以后页面可滚动，是由于 this.postErr = false;传递到组件中使得 overflow = ' '；

使用 this.$router.push跳转页面，则页面不可滚动，此时 overflow 仍然是 hidden，并未改变，解决方案是

 seeAgain(){
      this.postErr = false;
      this.$nextTick(() => {
        this.$router.push('/ddd');
      })
},

以上是 alert组件关闭跳转页面，页面无法滚动（Vue） 的全部内容， 来源链接： utcz.com/z/379789.html