VUE封装一个电商倒计时插件

VUE封装一个电商倒计时插件

1. 在components文件夹下新建文件
   
   2.代码如下

<template>
  <span> 距离活动结束还剩:{{ lastTime | format }} </span>
</template>

<script>
function fixedZero(val) {
  return val * 1 < 10 ? `0${val}` : val
}

export default {
  name: 'CountDown',
  props: {
    format: {
      type: Function,
      default: undefined,
    },
    target: {
      type: [Date, Number],
      required: true,
    },
    onEnd: {
      type: Function,
      default: () => ({}),
    },
  },
  data() {
    return {
      dateTime: '0',
      originTargetTime: 0,
      lastTime: 0,
      timer: 0,
      interval: 1000,
    }
  },
  filters: {
    format(time) {
      const hours = 60 * 60 * 1000
      const minutes = 60 * 1000
      const h = Math.floor(time / hours)
      const m = Math.floor((time - h * hours) / minutes)
      const s = Math.floor((time - h * hours - m * minutes) / 1000)
      return `${fixedZero(h)}时${fixedZero(m)}分${fixedZero(s)}秒`
    },
  },
  created() {
    this.initTime()
    this.tick()
  },
  methods: {
    //初始化时间函数
    initTime() {
      let lastTime = 0
      let targetTime = 0
      this.originTargetTime = this.target
      try {
        if (Object.prototype.toString.call(this.target) === '[object Date]') {
          targetTime = this.target
        } else {
          targetTime = new Date(this.target).getTime()
        }
      } catch (e) {
        throw new Error('invalid target prop')
      }

      lastTime = targetTime - new Date().getTime()
      this.lastTime = lastTime < 0 ? 0 : lastTime
    },
    //递归执行 倒计时
    tick() {
      const { onEnd } = this
      this.timer = setTimeout(() => {
        //判断剩余时间（毫秒）是否小于 1000毫秒
        if (this.lastTime < this.interval) {
          //结束倒计时 清除计时器
          clearTimeout(this.timer)
          this.lastTime = 0
          if (typeof onEnd === 'function') {
            onEnd()
          }
        } else {
          //递归执行 每秒 减1秒
          this.lastTime -= this.interval
          this.tick()
        }
      }, this.interval)
    },
  },
  beforeUpdate() {
    if (this.originTargetTime !== this.target) {
      this.initTime()
    }
  },
  beforeDestroy() {
    clearTimeout(this.timer)
  },
}
</script>

<style scoped>
</style>

3.使用

<template>
    <div><count-down :target="startTime + interval" :on-end="onEndHandle" /></div>
</template>

<script>
import CountDown from '@/components/CountDown/CountDown'  

export default {
  components: {
    CountDown
  },
   data(){
    return{
        startTime:new Date().getTime(),//活动开始时间(可根据开发需求调整)
        interval:13000000, //活动时长（毫秒）
    }
 },
  methods:{
  //倒计时结束回调
    onEndHandle(){
        console.log('倒计时结束回调')
    }
  }
}
</script>

4.页面展示

npm 安装:npm i countdown-vuejs
yarn安装：yarn add countdown-vuejs
使用:

<template>
  <div><count-down :target="new Date().getTime() + 100000" :on-end="onEndHandle" /></div>
</template>

<script>
import CountDown from 'countdown-vuejs'

export default {
  name: 'Success',	
  components: {CountDown},

  methods: {
    onEndHandle() {
      console.log('倒计时结束回调')
    },
  },
}
</script>

<style scoped>
</style>