vue 封装组件之活动倒计时组件-蒲公英云

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

桃扇骨 2022-12-01 14:10 330阅读 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
})