Vue实现倒计时组件(可自定义时间倒计时功能的组件)：

大 | 中 | 小
[不指定 2023/07/27 14:12 | by 刘新修 ]

 一、创建countDown.vue（倒计时组件）：

XML/HTML代码
  1. <template>  
  2.     <span :endTime="endTime" :endText="endText">  
  3.         <slot>{{content}}</slot>  
  4.     </span>  
  5. </template>  
  6.   
  7. <script>  
  8.     export default {  
  9.         data(){  
  10.             return {  
  11.                 content: '',  
  12.             }  
  13.         },  
  14.         props:{//接收父组件的数据  
  15.             endTime:{type:String,default:''},  
  16.             endText:{type:String,default:'活动已结束'},  
  17.         },  
  18.         watch: {//监听时间的变化  
  19.             endTime() {  
  20.                 this.countdowm(this.endTime)  
  21.             }  
  22.         },  
  23.         mounted () {  
  24.             this.countdowm(this.endTime)  
  25.         },  
  26.         methods: {  
  27.             countdowm(timestamp){  
  28.                 let self = this;  
  29.                 let timer = setInterval(function(){  
  30.                     let nowTime = new Date();  
  31.                     let endTime = new Date(timestamp * 1000);  
  32.                     let t = endTime.getTime() - nowTime.getTime();  
  33.                     if(t>0){  
  34.                         let day = Math.floor(t/86400000);  
  35.                         let hour=Math.floor((t/3600000)%24);  
  36.                         let min=Math.floor((t/60000)%60);  
  37.                         let sec=Math.floor((t/1000)%60);  
  38.                         hourhour = hour < 10 ? "0" + hour : hour;  
  39.                         minmin = min < 10 ? "0" + min : min;  
  40.                         secsec = sec < 10 ? "0" + sec : sec;  
  41.                         let format = '';  
  42.                         if(day > 0){  
  43.                             format = `${day}天${hour}小时${min}分${sec}秒`;  
  44.                         }  
  45.                         if(day <= 0 && hour > 0 ){  
  46.                             format = `${hour}小时${min}分${sec}秒`;  
  47.                         }  
  48.                         if(day <= 0 && hour <= 0){  
  49.                             format =`${min}分${sec}秒`;  
  50.                         }  
  51.                         self.content = format;  
  52.                     }else{  
  53.                         clearInterval(timer);  
  54.                         selfself.content = self.endText;  
  55.                     }  
  56.                 },1000);  
  57.             }  
  58.         }  
  59.     }  
  60. </script>  

 二、vue倒计时组件的使用方法（父组件里面）：

XML/HTML代码
  1. <template>  
  2.     <count-down :endTime="endTime" :endText="endText " />  
  3. </template>  
  4.   
  5. <script>  
  6. import countDown from '@/components/countDown'//引入路径，可更改  
  7.   
  8. export default {  
  9.     data() {  
  10.         return{  
  11.             endTime:new Date("2022/04/18 08:00:20").getTime() / 1000 +  ' ',  
  12.             //  console.log(endTime)=>得到毫秒  1658030420 可在方法里面放入后台数据,new Date('放后台数据').getTime() / 1000 +  ' ',但要记得调用方法  
  13.             endText:'',  
  14.         }  
  15.     },  
  16.     components: {  
  17.          countDown  
  18.     },  
  19. }  
  20. </script>  

说明一下：

XML/HTML代码
  1. 1）endTime是一个时间戳，而且是字符串数据类型，需要处理下  
  2.   
  3. let endTime = new Date("2022/04/18 08:00:20").getTime() / 1000 +  ' '  
  4.   
  5. 2）endText是倒计时结束显示的内容  

三、vue倒计时组件效果如下：

vue | 评论(0) | 引用(0) | 阅读(419)