自拍偷在线精品自拍偷,亚洲欧美中文日韩v在线观看不卡

研究大佬寫的倒計(jì)時(shí)組件(Vue)，學(xué)到了不少東西

作者：事業(yè)有成的張啦啦
開發(fā) 前端
入職的第一個(gè)需求是跟著一位前端大佬一起完成的一個(gè)活動(dòng)項(xiàng)目。由于是一起開發(fā)，喜歡閱讀源碼的我，當(dāng)然不會(huì)放過閱讀大佬的代碼的機(jī)會(huì)。

[[412028]]

一、前言

入職的第一個(gè)需求是跟著一位前端大佬一起完成的一個(gè)活動(dòng)項(xiàng)目。

由于是一起開發(fā)，喜歡閱讀源碼的我，當(dāng)然不會(huì)放過閱讀大佬的代碼的機(jī)會(huì)。

因?yàn)槲业捻撁嬷行枰褂玫降褂?jì)時(shí)功能，發(fā)現(xiàn)大佬的已經(jīng)寫了個(gè)現(xiàn)成的倒計(jì)時(shí)組件，于是直接就拿過來用了。

傳個(gè)參數(shù)就實(shí)現(xiàn)了功能的感覺真是太棒了。項(xiàng)目完成后，就膜拜了一下大佬的倒計(jì)時(shí)組件的代碼。真是讓我學(xué)到了不少。列舉如下：

  1. 計(jì)時(shí)器為什么要用setTimeout而不用setInterval
  2. 為什么不直接將剩余時(shí)間-1。
  3. 如何將所需要的時(shí)間返回出去(有可能我只需要分鐘和秒數(shù)，那就只返回分鐘和秒數(shù)，也有可能我全都要)。
  4. 不確定接口返回的是剩余時(shí)間還是截止日期，該怎么同時(shí)兼容這兩種情況。
  5. 不確定接口返回的時(shí)間是秒還是毫秒單位。

好了，你可能不太理解這些問題，但是沒關(guān)系，看完下面的解釋，相信你會(huì)豁然開朗。

二、開始手操

1. 先創(chuàng)建一個(gè)vue組件

  1. <template> 
  2.   <div class="_base-count-down"> 
  3.   </div> 
  4. </template> 
  5. <script> 
  6.  
  7. export default { 
  8.   data: () => ({ 
  9.     
  10.   }), 
  11.   props: { 
  12.      
  13.   }, 
  14. }; 
  15. </script> 
  16. <style lang='scss' scoped> 
  17.  
  18. </style> 

2. 實(shí)現(xiàn)基本的倒計(jì)時(shí)組件

接下來，假設(shè)接口獲得的是一個(gè)剩余時(shí)間。

將剩余時(shí)間time傳入這個(gè)倒計(jì)時(shí)組件，由于time可能是秒為單位的，也有可能是毫秒為單位的，所以我們需要在傳入time的是有也傳入一個(gè)isMilliSecond來告訴倒計(jì)時(shí)組件這個(gè)time是毫秒還是秒為單位的。如下代碼中的props所示。

  1. <template> 
  2.   <div class="_base-count-down"> 
  3.   </div> 
  4. </template> 
  5. <script> 
  6.  
  7. export default { 
  8.   data: () => ({ 
  9.   }), 
  10.   props: { 
  11.     time: { 
  12.       type: [Number, String], 
  13.       default: 0 
  14.     }, 
  15.     isMilliSecond: { 
  16.       type: Boolean, 
  17.       default: false 
  18.     } 
  19.   }, 
  20.   computed: { 
  21.     duration() { 
  22.       const time = this.isMiniSecond ? Math.round(+this.time / 1000) : Math.round(+this.time); 
  23.       return time; 
  24.     } 
  25.   }, 
  26. }; 
  27. </script> 
  28. <style lang='scss' scoped> 
  29.  
  30. </style> 

computed中的duration是將time進(jìn)行轉(zhuǎn)化的結(jié)果，不管time是毫秒還是秒，都轉(zhuǎn)化為秒 不知道你注意到了沒有：+this.time。為什么要在前面加個(gè)‘+’號(hào)。這點(diǎn)很值得我們學(xué)習(xí)，因?yàn)榻涌诜祷氐囊淮當(dāng)?shù)字有時(shí)候是字符串的形式，有時(shí)候是數(shù)字的形式(不能過分相信后端同學(xué)，必須自己做好防范)。所以通過前面加個(gè)‘+’號(hào) 通通轉(zhuǎn)化為數(shù)字?，F(xiàn)在的duration就是轉(zhuǎn)化后的time啦!

我們獲得duration之后就可以開始倒計(jì)時(shí)了

  1. <template> 
  2.   <div class="_base-count-down"> 
  3.   </div> 
  4. </template> 
  5. <script> 
  6.  
  7. export default { 
  8.   data: () => ({ 
  9.   }), 
  10.   props: { 
  11.     time: { 
  12.       type: [Number, String], 
  13.       default: 0 
  14.     }, 
  15.     isMilliSecond: { 
  16.       type: Boolean, 
  17.       default: false 
  18.     } 
  19.   }, 
  20.   computed: { 
  21.     duration() { 
  22.       const time = this.isMiniSecond ? Math.round(+this.time / 1000) : Math.round(+this.time); 
  23.       return time; 
  24.     } 
  25.   }, 
  26.   // 新增代碼： 
  27.   mounted() { 
  28.     this.countDown(); 
  29.   }, 
  30.   methods: { 
  31.     countDown() { 
  32.       this.getTime(this.duration); 
  33.     }, 
  34.   } 
  35. }; 
  36. </script> 
  37. <style lang='scss' scoped> 
  38.  
  39. </style> 

在這里創(chuàng)建了一個(gè)countDown方法，表示開始倒計(jì)時(shí)的意思，已進(jìn)入頁面就開始執(zhí)行countdown方法。

countDown方法調(diào)用了getTime方法，getTime需要傳入duration這個(gè)參數(shù)，也就是我們獲得的剩余時(shí)間。

現(xiàn)在來實(shí)現(xiàn)一下這個(gè)方法。

  1. <template> 
  2.   <div class="_base-count-down"> 
  3.     還剩{{day}}天{{hours}}:{{mins}}:{{seconds}} 
  4.   </div> 
  5. </template> 
  6. <script> 
  7.  
  8. export default { 
  9.   data: () => ({ 
  10.     days: '0', 
  11.     hours: '00', 
  12.     mins: '00', 
  13.     seconds: '00', 
  14.     timer: null, 
  15.   }), 
  16.   props: { 
  17.     time: { 
  18.       type: [Number, String], 
  19.       default: 0 
  20.     }, 
  21.     isMilliSecond: { 
  22.       type: Boolean, 
  23.       default: false 
  24.     } 
  25.   }, 
  26.   computed: { 
  27.     duration() { 
  28.       const time = this.isMiniSecond ? Math.round(+this.time / 1000) : Math.round(+this.time); 
  29.       return time; 
  30.     } 
  31.   }, 
  32.   mounted() { 
  33.     this.countDown(); 
  34.   }, 
  35.   methods: { 
  36.     countDown() { 
  37.       this.getTime(this.duration); 
  38.     }, 
  39.     // 新增代碼： 
  40.     getTime(duration) { 
  41.       this.timer && clearTimeout(this.timer); 
  42.       if (duration < 0) { 
  43.         return; 
  44.       } 
  45.       const { dd, hh, mm, ss } = this.durationFormatter(duration); 
  46.       this.days = dd || 0; 
  47.       this.hours = hh || 0; 
  48.       this.mins = mm || 0; 
  49.       this.seconds = ss || 0; 
  50.       this.timer = setTimeout(() => { 
  51.         this.getTime(duration - 1); 
  52.       }, 1000); 
  53.     } 
  54.   } 
  55. }; 
  56. </script> 
  57. <style lang='scss' scoped> 
  58.  
  59. </style> 

可以看到，getTime的目的就是獲得 days，hours,mins，seconds，然后顯示到html上，并且通過定時(shí)器實(shí)時(shí)來刷新days，hours,mins，seconds這個(gè)幾個(gè)值。從而實(shí)現(xiàn)了倒計(jì)時(shí)。很簡單，有木有?

durationFormatter是一個(gè)將duration轉(zhuǎn)化成天數(shù)，小時(shí)，分鐘，秒數(shù)的方法，很簡單，可以看下它的具體實(shí)現(xiàn)。

  1. durationFormatter(time) { 
  2.   if (!time) return { ss: 0 }; 
  3.   let t = time; 
  4.   const ss = t % 60; 
  5.   t = (t - ss) / 60; 
  6.   if (t < 1) return { ss }; 
  7.   const mm = t % 60; 
  8.   t = (t - mm) / 60; 
  9.   if (t < 1) return { mm, ss }; 
  10.   const hh = t % 24; 
  11.   t = (t - hh) / 24; 
  12.   if (t < 1) return { hh, mm, ss }; 
  13.   const dd = t; 
  14.   return { dd, hh, mm, ss }; 
  15. }, 

好了，問題開始來了!!

3. 為什么要用setTimeout來模擬setInterval的行為?

這里用setInerval不是更方便嗎?

  1. setTimeout(function(){··· }, n); // n毫秒后執(zhí)行function 
  1. setInterval(function(){··· }, n); // 每隔n毫秒執(zhí)行一次function 

可以看看setInterval有什么缺點(diǎn)：

再次強(qiáng)調(diào)，定時(shí)器指定的時(shí)間間隔，表示的是何時(shí)將定時(shí)器的代碼添加到消息隊(duì)列，而不是何時(shí)執(zhí)行代碼。所以真正何時(shí)執(zhí)行代碼的時(shí)間是不能保證的，取決于何時(shí)被主線程的事件循環(huán)取到，并執(zhí)行。

  1. setInterval(function, N)   
  2. //即：每隔N秒把function事件推到消息隊(duì)列中 
圖片

上圖可見，setInterval每隔100ms往隊(duì)列中添加一個(gè)事件;100ms后，添加T1定時(shí)器代碼至隊(duì)列中，主線程中還有任務(wù)在執(zhí)行，所以等待，some event執(zhí)行結(jié)束后執(zhí)行T1定時(shí)器代碼;又過了100ms，T2定時(shí)器被添加到隊(duì)列中，主線程還在執(zhí)行T1代碼，所以等待;又過了100ms，理論上又要往隊(duì)列里推一個(gè)定時(shí)器代碼，但由于此時(shí)T2還在隊(duì)列中，所以T3不會(huì)被添加，結(jié)果就是此時(shí)被跳過;這里我們可以看到，T1定時(shí)器執(zhí)行結(jié)束后馬上執(zhí)行了T2代碼，所以并沒有達(dá)到定時(shí)器的效果。

綜上所述，setInterval有兩個(gè)缺點(diǎn)：

  1. 使用setInterval時(shí)，某些間隔會(huì)被跳過;
  2. 可能多個(gè)定時(shí)器會(huì)連續(xù)執(zhí)行;

可以這么理解：每個(gè)setTimeout產(chǎn)生的任務(wù)會(huì)直接push到任務(wù)隊(duì)列中;而setInterval在每次把任務(wù)push到任務(wù)隊(duì)列前，都要進(jìn)行一下判斷(看上次的任務(wù)是否仍在隊(duì)列中)。

因而我們一般用setTimeout模擬setInterval，來規(guī)避掉上面的缺點(diǎn)。

4. 為什么要clearTimeout(this.timer)

第二問：為什么要有this.timer && clearTimeout(this.timer);這一句?

假設(shè)一個(gè)場景：

如圖所示，在倒計(jì)時(shí)的父組件中，有兩個(gè)按鈕，點(diǎn)擊活動(dòng)一就會(huì)傳入活動(dòng)一的剩余時(shí)間，點(diǎn)擊活動(dòng)二，就會(huì)傳入活動(dòng)二的時(shí)間。

圖片

如果此時(shí)倒計(jì)時(shí)組件正在做活動(dòng)一的倒計(jì)時(shí)，然后點(diǎn)擊活動(dòng)二，就要會(huì)馬上傳入新的time，這個(gè)時(shí)候就需要重新計(jì)時(shí)。當(dāng)然，這里并不會(huì)重新計(jì)時(shí)，因?yàn)榻M件的mounted只會(huì)執(zhí)行一次。也就是說this.countDown();只會(huì)執(zhí)行一次，也就是說this.getTime(this.duration);只會(huì)執(zhí)行一次，因此duration還是活動(dòng)一的時(shí)間，怎么辦呢?watch派上用場了。

我們來監(jiān)聽duration，如果發(fā)現(xiàn)duration變化，說明新的時(shí)間time傳入組件，這時(shí)就要重新調(diào)用this.countDown()。

代碼如下：

  1. <template> 
  2.   <div class="_base-count-down"> 
  3.     還剩{{day}}天{{hours}}:{{mins}}:{{seconds}} 
  4.   </div> 
  5. </template> 
  6. <script> 
  7.  
  8. export default { 
  9.   data: () => ({ 
  10.     days: '0', 
  11.     hours: '00', 
  12.     mins: '00', 
  13.     seconds: '00', 
  14.     timer: null, 
  15.   }), 
  16.   props: { 
  17.     time: { 
  18.       type: [Number, String], 
  19.       default: 0 
  20.     }, 
  21.     isMilliSecond: { 
  22.       type: Boolean, 
  23.       default: false 
  24.     } 
  25.   }, 
  26.   computed: { 
  27.     duration() { 
  28.       const time = this.isMiniSecond ? Math.round(+this.time / 1000) : Math.round(+this.time); 
  29.       return time; 
  30.     } 
  31.   }, 
  32.   mounted() { 
  33.     this.countDown(); 
  34.   }, 
  35.   // 新增代碼： 
  36.   watch: { 
  37.     duration() { 
  38.       this.countDown(); 
  39.     } 
  40.   }, 
  41.   methods: { 
  42.     countDown() { 
  43.       this.getTime(this.duration); 
  44.     }, 
  45.     durationFormatter(){...} 
  46.     getTime(duration) { 
  47.       this.timer && clearTimeout(this.timer); 
  48.       if (duration < 0) { 
  49.         return; 
  50.       } 
  51.       const { dd, hh, mm, ss } = this.durationFormatter(duration); 
  52.       this.days = dd || 0; 
  53.       this.hours = hh || 0; 
  54.       this.mins = mm || 0; 
  55.       this.seconds = ss || 0; 
  56.       this.timer = setTimeout(() => { 
  57.         this.getTime(duration - 1); 
  58.       }, 1000); 
  59.     } 
  60.   } 
  61. }; 
  62. </script> 
  63. <style lang='scss' scoped> 
  64.  
  65. </style> 

好了，但是并沒有解釋上面提出的那個(gè)問題：為什么要有this.timer && clearTimeout(this.timer);這一句?

這樣，假設(shè)現(xiàn)在頁面顯示的是活動(dòng)一的時(shí)間，這時(shí)，執(zhí)行到setTimeout，在一秒后就會(huì)把setTimeout里的回調(diào)函數(shù)放到任務(wù)隊(duì)列中，注意是一秒后哦!這時(shí)，然而，在這一秒的開頭，我們點(diǎn)擊了活動(dòng)二按鈕，這時(shí)候的活動(dòng)二的時(shí)間就會(huì)傳入倒計(jì)時(shí)組件中，然后觸發(fā)countDown(),也就調(diào)用this.getTime(this.duration);，然后執(zhí)行到setTimeout，也會(huì)一秒后把回調(diào)函數(shù)放到任務(wù)隊(duì)列中。

這時(shí)，任務(wù)隊(duì)列中就會(huì)有兩個(gè)setTimeout的回調(diào)函數(shù)了。等待一秒過去，兩個(gè)回調(diào)函數(shù)相繼執(zhí)行，我們就會(huì)看到頁面上的時(shí)間一下子背減了2，實(shí)際上是很快速地進(jìn)行了兩遍減1的操作。

這就是為什么要添加上this.timer && clearTimeout(this.timer);這一句的原因了。就是要把上一個(gè)setTimeout清除掉。

5. 使用 diffTime

當(dāng)你認(rèn)為這是一個(gè)完美的組件的時(shí)候，你想把這個(gè)組件用到項(xiàng)目上，假設(shè)你也確實(shí)用了，而且還上線了，確發(fā)現(xiàn)出現(xiàn)了個(gè)大問題：當(dāng)頁面打開的時(shí)候，倒計(jì)時(shí)開始了，時(shí)間是 還剩1天12：25：25，然后有人給你發(fā)微信，你馬上切換到微信，回復(fù)消息后切回瀏覽器，發(fā)現(xiàn)倒計(jì)時(shí)時(shí)間卻還是還剩1天12：25：25。你慌了：你寫的代碼出現(xiàn)bug了!

這是怎么回事?

出于節(jié)能的考慮, 部分瀏覽器在進(jìn)入后臺(tái)時(shí)(或者失去焦點(diǎn)時(shí)), 會(huì)將 setTimeout 等定時(shí)任務(wù)暫停 待用戶回到瀏覽器時(shí), 才會(huì)重新激活定時(shí)任務(wù)

說是暫停, 其實(shí)應(yīng)該說是延遲, 1s 的任務(wù)延遲到 2s, 2s 的延遲到 5s, 實(shí)際情況因?yàn)g覽器而異。

原來如此，看來不能每次都只是減1這么簡單了(畢竟你把瀏覽器切到后臺(tái)之后setTimeout就冷卻了，等幾秒后切回，然后執(zhí)行setTimeout，只是減了一秒而已)。

所以我們需要改寫一下getTime方法。

  1. <template> 
  2.   <div class="_base-count-down"> 
  3.     還剩{{day}}天{{hours}}:{{mins}}:{{seconds}} 
  4.   </div> 
  5. </template> 
  6. <script> 
  7.  
  8. export default { 
  9.   data: () => ({ 
  10.     days: '0', 
  11.     hours: '00', 
  12.     mins: '00', 
  13.     seconds: '00', 
  14.     timer: null, 
  15.     curTime: 0,// 新增代碼： 
  16.   }), 
  17.   props: { 
  18.     time: { 
  19.       type: [Number, String], 
  20.       default: 0 
  21.     }, 
  22.     isMilliSecond: { 
  23.       type: Boolean, 
  24.       default: false 
  25.     } 
  26.   }, 
  27.   computed: { 
  28.     duration() { 
  29.       const time = this.isMiniSecond ? Math.round(+this.time / 1000) : Math.round(+this.time); 
  30.       return time; 
  31.     } 
  32.   }, 
  33.   mounted() { 
  34.     this.countDown(); 
  35.   }, 
  36.    
  37.   watch: { 
  38.     duration() { 
  39.       this.countDown(); 
  40.     } 
  41.   }, 
  42.   methods: { 
  43.     countDown() { 
  44.       // 新增代碼： 
  45.       this.curTime = Date.now(); 
  46.       this.getTime(this.duration); 
  47.     }, 
  48.     durationFormatter(){...} 
  49.     getTime(duration) { 
  50.       this.timer && clearTimeout(this.timer); 
  51.       if (duration < 0) { 
  52.         return; 
  53.       } 
  54.       const { dd, hh, mm, ss } = this.durationFormatter(duration); 
  55.       this.days = dd || 0; 
  56.       this.hours = hh || 0; 
  57.       this.mins = mm || 0; 
  58.       this.seconds = ss || 0; 
  59.       this.timer = setTimeout(() => { 
  60.         // 新增代碼： 
  61.         const now = Date.now(); 
  62.         const diffTime = Math.floor((now - this.curTime) / 1000); 
  63.         this.curTime = now; 
  64.         this.getTime(duration - diffTime); 
  65.       }, 1000); 
  66.     } 
  67.   } 
  68. }; 
  69. </script> 
  70. <style lang='scss' scoped> 
  71.  
  72. </style> 

可以看到，我們在三個(gè)位置添加了新的代碼。

首先在data了添加了curTime這個(gè)變量，然后在執(zhí)行countDown的時(shí)候給curTime賦值Date.now()，也就是當(dāng)前的時(shí)刻，也就是顯示在頁面上的那個(gè)時(shí)刻。

然后看修改的第三處代碼?？梢钥吹绞菍?1改成了-diffTime。

now 是 setTimeout的回調(diào)函數(shù)執(zhí)行的時(shí)候的那個(gè)時(shí)刻。

因而 diffTime 則 表示 當(dāng)前這個(gè)setTimeout的回調(diào)函數(shù)執(zhí)行的時(shí)刻距離上 頁面上的剩余時(shí)間上一次變化的時(shí)間段。其實(shí)也就是 當(dāng)前這個(gè)setTimeout的回調(diào)函數(shù)執(zhí)行的時(shí)刻距離上 一個(gè)setTimeout的回調(diào)函數(shù)執(zhí)行的時(shí)刻時(shí)間段。

可能你還是不太能理解diffTime。舉個(gè)例子：

你打開了這個(gè)倒計(jì)時(shí)頁面，于是執(zhí)行了countDown，也就是說要執(zhí)行g(shù)etTime這個(gè)方法了。也就是會(huì)馬上執(zhí)行下列的代碼。

  1. this.days = dd || 0; 
  2. this.hours = hh || 0; 
  3. this.mins = mm || 0; 
  4. this.seconds = ss || 0; 

執(zhí)行完這些代碼頁面上就會(huì)出現(xiàn)剩余時(shí)間。

而this.curTime = Date.now(); 就記錄下了此刻的時(shí)間點(diǎn)。

然后一秒后執(zhí)行setTimeout里的回調(diào)函數(shù)：

const now = Date.now(); 記錄當(dāng)前這個(gè)setTimeout的回調(diào)函數(shù)執(zhí)行的時(shí)間點(diǎn)。

const diffTime = Math.floor((now - this.curTime) / 1000); 記錄當(dāng)前這個(gè)setTimeout的回調(diào)函數(shù)執(zhí)行的時(shí)間點(diǎn)距離頁面上開始 渲染 剩余時(shí)間的 這一段時(shí)間。其實(shí)此時(shí)的diffTime就是=1。

然后this.curTime = now; 將curTime的值變成當(dāng)前這個(gè)setTimeout的回調(diào)函數(shù)執(zhí)行的時(shí)間點(diǎn)。

this.getTime(duration - diffTime); 其實(shí)就是this.getTime(duration - 1);

然后又執(zhí)行g(shù)etTime，就會(huì)重新執(zhí)行下面的代碼，有渲染了新的剩余時(shí)間。

  1. this.days = dd || 0; 
  2. this.hours = hh || 0; 
  3. this.mins = mm || 0; 
  4. this.seconds = ss || 0; 

然后一秒后又要執(zhí)行setTmieout的回調(diào)函數(shù)，在這一秒還沒結(jié)束的時(shí)候，我們將瀏覽器切到后臺(tái)，此時(shí)setTimeout冷卻了。等5秒后再切回。于是setTmieout的回調(diào)函數(shù)才得以執(zhí)行。

這時(shí)const now = Date.now(); 記錄當(dāng)前這個(gè)setTimeout的回調(diào)函數(shù)執(zhí)行的時(shí)間點(diǎn)。

而curTime是上一個(gè)setTimeout的回調(diào)函數(shù)執(zhí)行的時(shí)間。

所以const diffTime = Math.floor((now - this.curTime) / 1000);實(shí)際上，diffTime的值就是5秒。

因而this.getTime(duration - diffTime); 其實(shí)就是this.getTime(duration - 5);

這樣就完美解決了因?yàn)闉g覽器切到后臺(tái)，導(dǎo)致剩余時(shí)間不變的問題。

6. 添加新功能：可以傳入到期時(shí)間。

之前是只能傳入剩余時(shí)間的，現(xiàn)在希望也支持傳入到期時(shí)間。

只需要改動(dòng)一下duration就好了。

  1. computed: { 
  2.   duration() { 
  3.     if (this.end) { 
  4.       let end = String(this.end).length >= 13 ? +this.end : +this.end * 1000; 
  5.       end -= Date.now(); 
  6.       return end; 
  7.     } 
  8.     const time = this.isMiniSecond ? Math.round(+this.time / 1000) : Math.round(+this.time); 
  9.     return time; 
  10.   } 
  11. }, 

判斷傳入的end的長度是否大于13來判斷是秒還是毫秒。輕松!

7. 添加新功能：可以選擇要顯示的內(nèi)容，例如只顯示秒，或者只顯示小時(shí)。

只需要改動(dòng)一下html：

  1. <template> 
  2.   <div class="_base-count-down no-rtl"> 
  3.     <div class="content"> 
  4.       <slot v-bind="{ 
  5.         d: days, h: hours, m: mins, s: seconds, 
  6.         hh: `00${hours}`.slice(-2), 
  7.         mm: `00${mins}`.slice(-2), 
  8.         ss: `00${seconds}`.slice(-2), 
  9.       }"></slot> 
  10.     </div> 
  11.   </div> 
  12. </template> 

很巧妙有沒有，只需要用插槽，就把倒計(jì)時(shí)組件，也就是把子組件的值傳遞給父組件了。

看看父組件是怎么使用這個(gè)組件的。

  1. <base-counter v-slot="timeObj" :time="countDown"> 
  2.   <div class="count-down"> 
  3.     <div class="icon"></div> 
  4.     {{timeObj.d}}天{{timeObj.hh}}小時(shí){{timeObj.mm}}分鐘{{timeObj.ss}}秒 
  5.   </div> 
  6. </base-counter> 

看，如此巧妙又簡單。

發(fā)現(xiàn)00${hours}.slice(-2) 這種寫法也很值得學(xué)習(xí)。以前在獲得到分鐘的時(shí)候，要手動(dòng)判斷獲得的分鐘是兩位數(shù)還是一位數(shù)，如果是一位數(shù)的話就要在前面手動(dòng)補(bǔ)上0。就像下面的代碼：

  1. var StartMinute = startDate.getMinutes().toString().length >= 2 ? startDate.getMinutes() : '0' + startDate.getHours(); 

而00${hours}.slice(-2) 則不用判斷，先補(bǔ)上0再說，然后再從后面往前截取兩位。

[[412030]]

到此。

一個(gè)完美的倒計(jì)時(shí)組件就完成了。

三、學(xué)習(xí)總結(jié)

  1. 明白了setInterval的缺點(diǎn)以及用setTimeout代替setInterval。
  2. 學(xué)到了“+”，操作，不管三七二十一，將接口得到的長串?dāng)?shù)字轉(zhuǎn)化為數(shù)字保平安。
  3. 利用clearTimeout來清除掉之前的計(jì)時(shí)器，以防止造成影響。
  4. 學(xué)會(huì)使用v-slot來子傳父傳值
  5. 學(xué)會(huì)一個(gè)倒計(jì)時(shí)組件，為了以后方便cv操作。把組件完整代碼貼上：
  1. <template> 
  2.   <div class="_base-count-down no-rtl"> 
  3.     <div class="content"> 
  4.       <slot v-bind="{ 
  5.         d: days, h: hours, m: mins, s: seconds, 
  6.         hh: `00${hours}`.slice(-2), 
  7.         mm: `00${mins}`.slice(-2), 
  8.         ss: `00${seconds}`.slice(-2), 
  9.       }"></slot> 
  10.     </div> 
  11.   </div> 
  12. </template> 
  13. <script> 
  14. /* eslint-disable object-curly-newline */ 
  15.  
  16. export default { 
  17.   data: () => ({ 
  18.     days: '0', 
  19.     hours: '00', 
  20.     mins: '00', 
  21.     seconds: '00', 
  22.     timer: null, 
  23.     curTime: 0 
  24.   }), 
  25.   props: { 
  26.     time: { 
  27.       type: [Number, String], 
  28.       default: 0 
  29.     }, 
  30.     refreshCounter: { 
  31.       type: [Number, String], 
  32.       default: 0 
  33.     }, 
  34.     end: { 
  35.       type: [Number, String], 
  36.       default: 0 
  37.     }, 
  38.     isMiniSecond: { 
  39.       type: Boolean, 
  40.       default: false 
  41.     } 
  42.   }, 
  43.   computed: { 
  44.     duration() { 
  45.       if (this.end) { 
  46.         let end = String(this.end).length >= 13 ? +this.end : +this.end * 1000; 
  47.         end -= Date.now(); 
  48.         return end; 
  49.       } 
  50.       const time = this.isMiniSecond ? Math.round(+this.time / 1000) : Math.round(+this.time); 
  51.       return time; 
  52.     } 
  53.   }, 
  54.   mounted() { 
  55.     this.countDown(); 
  56.   }, 
  57.   watch: { 
  58.     duration() { 
  59.       this.countDown(); 
  60.     }, 
  61.     refreshCounter() { 
  62.       this.countDown(); 
  63.     } 
  64.   }, 
  65.   methods: { 
  66.     durationFormatter(time) { 
  67.       if (!time) return { ss: 0 }; 
  68.       let t = time; 
  69.       const ss = t % 60; 
  70.       t = (t - ss) / 60; 
  71.       if (t < 1) return { ss }; 
  72.       const mm = t % 60; 
  73.       t = (t - mm) / 60; 
  74.       if (t < 1) return { mm, ss }; 
  75.       const hh = t % 24; 
  76.       t = (t - hh) / 24; 
  77.       if (t < 1) return { hh, mm, ss }; 
  78.       const dd = t; 
  79.       return { dd, hh, mm, ss }; 
  80.     }, 
  81.     countDown() { 
  82.       // eslint-disable-next-line no-unused-expressions 
  83.       this.curTime = Date.now(); 
  84.       this.getTime(this.duration); 
  85.     }, 
  86.     getTime(time) { 
  87.       // eslint-disable-next-line no-unused-expressions 
  88.       this.timer && clearTimeout(this.timer); 
  89.       if (time < 0) { 
  90.         return; 
  91.       } 
  92.       // eslint-disable-next-line object-curly-newline 
  93.       const { dd, hh, mm, ss } = this.durationFormatter(time); 
  94.       this.days = dd || 0; 
  95.       // this.hours = `00${hh || ''}`.slice(-2); 
  96.       // this.mins = `00${mm || ''}`.slice(-2); 
  97.       // this.seconds = `00${ss || ''}`.slice(-2); 
  98.       this.hours = hh || 0; 
  99.       this.mins = mm || 0; 
  100.       this.seconds = ss || 0; 
  101.       this.timer = setTimeout(() => { 
  102.         const now = Date.now(); 
  103.         const diffTime = Math.floor((now - this.curTime) / 1000); 
  104.         const step = diffTime > 1 ? diffTime : 1; // 頁面退到后臺(tái)的時(shí)候不會(huì)計(jì)時(shí)，對比時(shí)間差，大于1s的重置倒計(jì)時(shí) 
  105.         this.curTime = now; 
  106.         this.getTime(time - step); 
  107.       }, 1000); 
  108.     } 
  109.   } 
  110. }; 
  111. </script> 
  112. <style lang='scss' scoped> 
  113. @import '~@assets/css/common.scss'; 
  114.  
  115. ._base-count-down { 
  116.   color: #fff; 
  117.   text-align: left; 
  118.   position: relative; 
  119.   .content { 
  120.     width: auto; 
  121.     display: flex; 
  122.     align-items: center; 
  123.   } 
  124.   span { 
  125.     display: inline-block; 
  126.   } 
  127.   .section { 
  128.     position: relative; 
  129.   } 
  130. } 
  131. </style> 

 

責(zé)任編輯：姜華 來源： 前端陽光
Vue倒計(jì)時(shí)組件前端
相關(guān)推薦

2022-10-21 15:42:21

倒計(jì)時(shí)鴻蒙

2014-08-18 14:30:27

Android倒計(jì)時(shí)

2011-04-11 09:17:28

Ubuntu倒計(jì)時(shí)

2017-07-20 16:21:52

UICountDownTidelay

2015-03-23 17:58:04

驗(yàn)證碼倒計(jì)時(shí)并行

2014-03-21 13:46:45

2011-04-11 09:50:56

Ubuntu 11.0

2014-02-18 10:36:33

2025-03-14 00:00:00

2013-04-09 10:01:18

微軟Windows XP

2013-10-10 09:23:15

Android 4.4Kitkat

2019-12-13 19:37:00

BashLinux命令

2020-10-28 17:54:49

成都信息安全

2013-10-08 09:24:39

Windows 8.1Windows 8

2022-06-14 08:45:27

瀏覽器IEWindows

2011-03-06 15:49:25

webOSBlackBerry

2011-05-23 08:43:40

jQueryjQuery插件

2021-11-26 00:00:13

AndroidCountDownTi控件

2013-06-06 11:27:52

iRadioWWDC2013
點(diǎn)贊
收藏

51CTO技術(shù)棧公眾號(hào)