基于vue2.0的活動(dòng)倒計(jì)時(shí)組件countdown(附源碼下載)

更新時(shí)間：2018年10月09日 08:39:06 作者：月光光

這是一款基于vue2.0的活動(dòng)倒計(jì)時(shí)組件，可以使用服務(wù)端時(shí)間作為當(dāng)前時(shí)間，在倒計(jì)時(shí)開(kāi)始和結(jié)束時(shí)可以自定義回調(diào)函數(shù)。這篇文章主要介紹了基于vue2.0的活動(dòng)倒計(jì)時(shí)組件countdown,需要的朋友可以參考下

這是一款基于vue2.0的活動(dòng)倒計(jì)時(shí)組件，可以使用服務(wù)端時(shí)間作為當(dāng)前時(shí)間，在倒計(jì)時(shí)開(kāi)始和結(jié)束時(shí)可以自定義回調(diào)函數(shù)。

查看演示下載源碼

安裝

npm install vue2-countdown --save

使用組件

首先在模板部分添加：

<template>
 <div>
<count-down 
 v-on:start_callback="countDownS_cb(1)" 
 v-on:end_callback="countDownE_cb(1)" 
 :currentTime="1538983555" 
 :startTime="1538983555" 
 :endTime="1538983565" 
 :dayTxt="'天'" 
 :hourTxt="'小時(shí)'" 
 :minutesTxt="'分鐘'" 
 :secondsTxt="'秒'">
 </count-down>
</div>
</template>

然后在js部分：

<script>
import CountDown from 'vue2-countdown'

export default {
 components: {
  CountDown
 },
 methods: {
  countDownS_cb: function (x) {
   console.log(x)
  },
  countDownE_cb: function (x) {
   console.log(x)
  }
 }
}
</script>

選項(xiàng)

名稱(chēng)	默認(rèn)值	描述
currentTime	( new Date() ).getTime()	當(dāng)前時(shí)間戳,如果不傳,默認(rèn)獲取用戶本地的時(shí)間(建議傳服務(wù)器的當(dāng)前時(shí)間)
startTime		開(kāi)始時(shí)間戳，必需
endTime		結(jié)束時(shí)間戳，必需
tipText	距離開(kāi)始	開(kāi)始倒計(jì)時(shí)之前的提示文字
tipTextEnd	距離結(jié)束	開(kāi)始倒計(jì)時(shí)之后的提示文字
endText	已結(jié)束	倒計(jì)時(shí)結(jié)束之后的提示文字
dayTxt	:	自定義顯示的天數(shù)文字
hourTxt	:	自定義顯示的小時(shí)文字
secondsTxt	:	自定義顯示的分鐘文字
secondsFixed	:	自定義顯示的秒數(shù)文字

回調(diào)函數(shù)

名稱(chēng)	默認(rèn)值	描述
start_callback	開(kāi)始倒計(jì)時(shí)結(jié)束之后的回調(diào)方法
end_callback	活動(dòng)倒計(jì)時(shí)結(jié)束之后的回調(diào)方法

總結(jié)

以上所述是小編給大家介紹的基于vue2.0的活動(dòng)倒計(jì)時(shí)組件countdown(附源碼下載)，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

您可能感興趣的文章:

相關(guān)文章

詳解Vue3 Composition API中的提取和重用邏輯
這篇文章主要介紹了Vue3 Composition API中的提取和重用邏輯，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2020-04-04
Vue實(shí)現(xiàn)模糊查詢-Mysql數(shù)據(jù)庫(kù)數(shù)據(jù)
這篇文章主要介紹了基于Vue實(shí)現(xiàn)Mysql數(shù)據(jù)庫(kù)數(shù)據(jù)模糊查詢,下面文章我們主要實(shí)現(xiàn)的是輸入框中輸入數(shù)據(jù)，根據(jù)輸入的結(jié)果模糊搜索數(shù)據(jù)庫(kù)對(duì)應(yīng)內(nèi)容，實(shí)現(xiàn)模糊查詢，感興趣的小伙伴可以進(jìn)入文章我們一起學(xué)習(xí)
2021-12-12
Vue.js學(xué)習(xí)筆記之常用模板語(yǔ)法詳解
本篇文章主要介紹了Vue.js學(xué)習(xí)筆記之常用模板語(yǔ)法詳解，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2017-07-07
vue3實(shí)現(xiàn)v-model原理詳解
這篇文章主要介紹了vue3實(shí)現(xiàn)v-model原理詳解，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2019-10-10
解決Vue 通過(guò)下表修改數(shù)組,頁(yè)面不渲染的問(wèn)題
下面小編就為大家分享一篇解決Vue 通過(guò)下表修改數(shù)組,頁(yè)面不渲染的問(wèn)題。具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2018-03-03
Vue中el-form標(biāo)簽中的自定義el-select下拉框標(biāo)簽功能
這篇文章主要介紹了Vue中el-form標(biāo)簽中的自定義el-select下拉框標(biāo)簽功能,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2020-04-04
vue權(quán)限問(wèn)題的完美解決方案
今天來(lái)說(shuō)說(shuō)權(quán)限管理，因?yàn)榫W(wǎng)上已經(jīng)有很多關(guān)于這方面的很多內(nèi)容，下面這篇文章主要給大家介紹了關(guān)于vue權(quán)限問(wèn)題的完美解決方案，需要的朋友們下面來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2019-05-05
element中el-select的使用及說(shuō)明
這篇文章主要介紹了element中el-select的使用及說(shuō)明，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2023-01-01
vue keepAlive緩存清除問(wèn)題案例詳解
這篇文章主要介紹了vue keepAlive緩存清除問(wèn)題案例詳解,本篇文章通過(guò)簡(jiǎn)要的案例,講解了該項(xiàng)技術(shù)的了解與使用,以下就是詳細(xì)內(nèi)容,需要的朋友可以參考下
2021-09-09
vue使用高德地圖實(shí)現(xiàn)軌跡顯隱效果
本文主要介紹了在vue中如何使用高德地圖實(shí)現(xiàn)軌跡顯隱的功能,包括了相關(guān)代碼的編寫(xiě)和具體實(shí)現(xiàn)步驟,對(duì)于想要在自己的項(xiàng)目中使用這一功能的開(kāi)發(fā)者有一定的參考價(jià)值,希望大家對(duì)此有所幫助,同時(shí)也歡迎大家多多支持腳本之家
2024-10-10