美文网首页
进入页面右下角出现提示,只出现一次,1分钟后自动关闭

进入页面右下角出现提示,只出现一次,1分钟后自动关闭

作者: w_小伍 | 来源:发表于2020-05-29 18:38 被阅读0次

    用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;
    }
    

    相关文章

      网友评论

          本文标题:进入页面右下角出现提示,只出现一次,1分钟后自动关闭

          本文链接:https://www.haomeiwen.com/subject/cnyfzhtx.html