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

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

在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>