用sessionStorage来存储状态的
代码
<!--右下角提示-->
<div class="br-notice" v-show="shorbrNotice" :class="{ noticeHide: !showbrFadeOut}">
<div class="br-title clearfloat">
<div class="g-f-l">温馨提示</div>
<div class="g-f-r br-close" @click="closebrNotice()">×</div>
</div>
<div class="br-txt clearfloat">
内容内容内容内容内容内容内容内容
内容内容内容内容内容内容内容内容
内容内容内容内容内容内容内容内容
内容内容内容内容内容内容内容内容
内容内容内容内容内容内容内容内容
</div>
</div>
js
data () {
return {
shorbrNotice:true,
showbrFadeOut:true,
}
},
mounted(){
if (JSON.parse(sessionStorage.getItem('shorbrNotice')) !== null) {
if (JSON.parse(sessionStorage.getItem('shorbrNotice'))) {
this.shorbrNotice = false
} else {
this.shorbrNotice = true
}
}
let that = this
setTimeout(function () {
that.showbrFadeOut = false
sessionStorage.setItem('shorbrNotice', true)
}, 60000)
},
methods: {
closebrNotice() {
sessionStorage.setItem('shorbrNotice', true)
this.showbrFadeOut = false
}
}
css
* {
box-sizing: border-box;
}
.g-f-l {
float: left;
}
.g-f-r {
float: right;
}
.clearfloat::after{display:block;clear:both;content:"";visibility:hidden;height:0}
.clearfloat{zoom:1}
.br-notice {
position: fixed;
right: 28px;
width: 312px;
background-color: #fff;
animation: fadeBottomIn 1.5s 0.2s linear;
animation-fill-mode: both;
border-radius: 8px;
border: solid 1px #ececec;
}
@keyframes fadeBottomIn {
0% {
bottom: -33%;
opacity: 0;
}
100% {
opacity: 1;
bottom: 4%;
z-index: 10;
}
}
.br-txt {
background-color: #fff;
padding: 20px;
}
.br-notice.noticeHide {
animation: fadeBottomOut 0.8s 0.3s linear;
animation-fill-mode: both;
}
@keyframes fadeBottomOut {
0% {
bottom: 4%;
opacity: 1;
}
100% {
bottom: -33%;
opacity: 1;
}
}
.br-title {
width: 310px;
line-height: 26px;
padding-left: 12px;
height: 26px;
border-radius: 5px;
background-color: #fbfbfb;
}
.br-close {
margin-right: -20px;
margin-top: -5px;
font-size: 30px;
cursor: pointer;
}
.br-close em{
font-size: 18px;
color: #C1C1C1;
cursor: pointer;
}
.br-close em:hover {
color: #409EFF;
}
网友评论