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{ 100vw; height: 100vh; background: rgba(0,0,0,0.3); position: fixed; top: 0; left: 0; z-index: 999; .alertMain{ 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'); }) },