vue 封装组件之活动倒计时组件

桃扇骨 2022-12-01 14:10 254阅读 0赞

<template>
      <div class="count-down">
        <span class="count-down-end-time">{ { endHours}}点场</span>
        <span class="count-down-surplus">{ { surplus | filterTime}}</span>
      </div>
    </template>
    
    <script>
    export default { 
      props: { 
      // 接收父组件传入的时间
        endHours: { 
          type: Number,
          required: true,
          default: 0
        }
      },
      data() { 
        return { 
          surplus: '',
          diffSeconds: 0,
          interval: undefined
        }
      },
      methods: { 
        computedSurplusTime() { 
          if (this.interval) { 
            clearInterval(this.interval)
          }
          const date = new Date()
          if (date.getHours() > this.endHours) { 
            this.surplus = '活动已结束'
            return
          }
          if (date.getHours() === this.endHours) { 
            this.surplus = '活动进行中'
            return
          }
          if (date.getHours() < this.endHours) { 
            this.surplus = '活动未开始'
          }
    
          const diffHours = this.endHours - date.getHours() - 1
          const diffMinutes = 60 - date.getMinutes() - 1
          const diffSeconds = 60 - date.getSeconds()
    
          this.diffSeconds = diffHours * 3600 + diffMinutes * 60 + diffSeconds
    
          this.interval = setInterval(() => { 
            this.diffSeconds -= 1
          }, 1000)
        }
      },
      watch: { 
        diffSeconds(newV) { 
          const hours = Math.floor(newV / 3600)
          const minutes = Math.floor(newV / 60) % 60
          const seconds = newV % 60
          this.surplus = hours + ':' + minutes + ':' + seconds
    
          if (newV === 0) { 
            this.computedSurplusTime()
          }
        },
        endHours() { 
          this.computedSurplusTime()
        }
      },
      created() { 
        this.computedSurplusTime()
      }
    }
    </script>
    
    <style lang="scss" scoped>
    @import '@css/style.scss';
    .count-down { 
      display: inline-block;
      font-size: px2rem(14);
      margin-left: px2rem(8);
    
      span { 
        display: inline-block;
        padding: px2rem(2) px2rem(4);
      }
    
      &-end-time { 
        background-color: #d81e06;
        border-top-left-radius: px2rwm(4);
        border-bottom-left-radius: px2rwm(4);
        border: px2rem(1) solid #d81e06;
      }
    
      &-surplus { 
        background-color: #fff;
        border-top-right-radius: px2rem(4);
        border-bottom-right-radius: px2rem(4);
        border: px2rem(1) solid #d81e06;
        color: #d81e06;
      }
    }
    </style>

#### filters.js ####

（main.js中引入，即可使用）

import Vue from 'vue'
    
    Vue.filter('filterTime', function(value) { 
      if (!value) { 
        return ''
      }
    
      if(value.indexOf(':') === -1) { 
        return value
      }
    
      let result = ''
      const arr = value.split(':')
      if (parseInt(arr[0]) < 10) { 
        result = '0' + arr[0]
      } else { 
        result = arr[0]
      }
    
      if (parseInt(arr[1]) < 10) { 
        result = result + ':0' + arr[1]
      } else { 
        result = result + ':' + arr[1]
      }
    
      if (parseInt(arr[2]) < 10) { 
        result = result + ':0' + arr[2]
      } else { 
        result = result + ':' + arr[2]
      }
    
      return result
    })

使用

<count-down :endHours="9"></count-down>

![在这里插入图片描述][20200827144125292.gif_pic_center]  
![在这里插入图片描述][20200827144232359.png_pic_center]  
![在这里插入图片描述][20200827144259298.png_pic_center]

[20200827144125292.gif_pic_center]: /images/20221123/77fc88df0369486c91077883ad7f2774.png
[20200827144232359.png_pic_center]: /images/20221123/988415c8fba24972a173c65bc4918b5a.png
[20200827144259298.png_pic_center]: /images/20221123/4470156f1c9c46b4842e43f41efd3bcc.png