mall-web-ssr/components/mobile/common/RemindBox.vue

<template>
  <div class="com-remind-box" v-show="showBox">{{title}}</div>
</template>
<script>
  export default {
    props: ['title', 'timeoutCount'],
    data () {
      return {
        showBox: false,
        timer: ''
      }
    },
    watch: {
      timeoutCount: function (val, oldVal) {
        if (val > 0) {
          clearTimeout(this.timer)
          this.setTimer()
        } else {
          this.showBox = false
        }
      }
    },
    methods: {
      setTimer: function () {
        let _this = this
        _this.showBox = true
        _this.timer = setTimeout(function () {
          _this.showBox = false
        }, 1000)
      }
    }
  }
</script>
<style>
  .com-remind-box{
    position: fixed;
    top: 50%;
    left: 50%;
    margin-left: -1.07rem;
    margin-top: -.6rem;
    z-index: 100;
    background: rgba(0,0,0,.6);
    color: #fff;
    font-size: .28rem;
    padding: .44rem .51rem;
    border-radius: .1rem;
  }
</style>