vue設(shè)計(jì)一個(gè)倒計(jì)時(shí)秒殺的組件詳解
簡介:
倒計(jì)時(shí)秒殺組件在電商網(wǎng)站中層出不窮 不過思路萬變不離其蹤,我自己根據(jù)其他資料設(shè)計(jì)了一個(gè)vue版的
核心思路:
- 1、時(shí)間不能是本地客戶端的時(shí)間 必須是服務(wù)器的時(shí)間這里用一個(gè)settimeout代替 以為時(shí)間必須統(tǒng)一
- 2、開始時(shí)間,結(jié)束時(shí)間通過父組件傳入,當(dāng)服務(wù)器時(shí)間在這個(gè)開始時(shí)間和結(jié)束時(shí)間的范圍內(nèi) 參加活動按鈕可以點(diǎn)擊,并且參加過活動以后不能再參加,
- 3、在組件創(chuàng)建的時(shí)候 同步得到現(xiàn)在時(shí)間服務(wù)時(shí)間差,并且在這里邊設(shè)置定時(shí)器,每秒都做判斷看秒殺是否開始和結(jié)束,
- 4、在更新時(shí)間的函數(shù)中是否開始和結(jié)束,
- 5、在computed鉤子中監(jiān)聽disable 確定按鈕是否可點(diǎn)擊
- 6、參加過活動在updated中停止定時(shí)器的計(jì)時(shí),頁面銷毀的時(shí)候也停止計(jì)時(shí)
下邊是代碼
子組件
<template> <div> <button @click="handleClick" :disabled="disabled"> {{btnText}} </button> <span>{{tip}}</span> </div> </template> <script> import moment from 'moment' export default { name: "Spike", props: { startTime: { required: true, validator: (val) => { return moment.isMoment(val) } }, endTime: { required: true, validator: (val) => { return moment.isMoment(val) } } }, data() { return { start: false, end: false, done: false, tip: '', timeGap: 0, btnText:"" } }, computed: { disabled() { //當(dāng)三個(gè)異號的時(shí)候disable返回真,不可點(diǎn)擊, // 初始化通過this.updateState確定disable的狀態(tài) return !(this.start && !this.end && !this.done); } }, async created() { const serverTime=await this.getServerTime(); this.timeGap=Date.now()-serverTime;//當(dāng)前時(shí)間和服務(wù)器時(shí)間差 this.updateState(); this.timeInterval=setInterval(()=>{ this.updateState() },1000) }, updated(){ if(this.end||this.done){ clearInterval(this.timeInterval) } }, methods: { handleClick() { alert("提交成功"); this.done=true; this.btnText="已參加過活動" }, getServerTime() { //模擬服務(wù)器時(shí)間 return new Promise((resolve, reject) => { setTimeout(() => { //當(dāng)前時(shí)間慢10秒就是服務(wù)器時(shí)間 resolve(new Date(Date.now() -10 * 1000).getTime())//跟本地時(shí)間差 }, 0) }) }, updateState() { const now = moment(new Date(Date.now() - this.timeGap));//當(dāng)前服務(wù)器時(shí)間 const diffStart=this.startTime.diff(now);//開始時(shí)間和服務(wù)器時(shí)間之差 const diffEnd=this.endTime.diff(now);//結(jié)束時(shí)間和服務(wù)器時(shí)間之差 if(diffStart<0){ this.start=true; this.tip="秒殺已開始"; this.btnText="參加" }else{ this.tip=`距離秒殺開始還剩${Math.ceil(diffStart/1000)}秒`; this.btnText="活動未開始"; } if(diffEnd<=0){ this.end=true; if( !this.btnText==="已參加過活動"||this.btnText==="參加"){ this.tip="秒殺已結(jié)束"; this.btnText="活動已結(jié)束"; } } } }, beforeDestroy() { clearInterval(this.timeInterval) } } </script> <style scoped> button[disabled]{ cursor: not-allowed; } </style>
父組件
<template> <div> <h1 style="color: red">設(shè)計(jì)一個(gè)秒殺倒計(jì)時(shí)的組件</h1> <Spike :startTime="startTime" :endTime="endTime"></Spike> </div> </template> <script> import Spike from './Spike' import moment from 'moment' export default { name: "index", components:{ Spike }, data(){ return{ endTime:moment(new Date(Date.now()+10*1000)), startTime:moment(new Date(Date.now())) } } } </script> <style scoped> </style>
以上所述是小編給大家介紹的vue設(shè)計(jì)一個(gè)倒計(jì)時(shí)秒殺的組件詳解整合,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時(shí)回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持!
相關(guān)文章
vue中ref標(biāo)簽屬性和$ref的關(guān)系解讀
這篇文章主要介紹了vue中ref標(biāo)簽屬性和$ref的關(guān)系,具有很好的參考價(jià)值,希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-07-07vue動態(tài)合并單元格并添加小計(jì)合計(jì)功能示例
這篇文章主要給大家介紹了關(guān)于vue動態(tài)合并單元格并添加小計(jì)合計(jì)功能的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-11-11springboot+VUE實(shí)現(xiàn)登錄注冊
這篇文章主要為大家詳細(xì)介紹了springboot+VUE實(shí)現(xiàn)登錄注冊,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-05-05Vue3 elementUI如何修改el-date-picker默認(rèn)時(shí)間
這篇文章主要介紹了Vue3 elementUI如何修改el-date-picker默認(rèn)時(shí)間,具有很好的參考價(jià)值,希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-08-08Vue中data傳遞函數(shù)、props接收函數(shù)及slot傳參的使用及說明
這篇文章主要介紹了Vue中data傳遞函數(shù)、props接收函數(shù)及slot傳參的使用及說明,具有很好的參考價(jià)值,希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-10-10vue router+vuex實(shí)現(xiàn)首頁登錄驗(yàn)證判斷邏輯
這篇文章主要介紹了vue router+vuex實(shí)現(xiàn)首頁登錄判斷邏輯,用于判斷是否登錄首頁,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-05-05Vue實(shí)現(xiàn)商品詳情頁的評價(jià)列表功能
這篇文章主要介紹了Vue實(shí)現(xiàn)商品詳情頁的評價(jià)列表功能,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-09-09