基于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原理詳解，文中通過(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
今天來(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ō)明，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-01-01
這篇文章主要介紹了vue keepAlive緩存清除問(wèn)題案例詳解,本篇文章通過(guò)簡(jiǎn)要的案例,講解了該項(xiàng)技術(shù)的了解與使用,以下就是詳細(xì)內(nèi)容,需要的朋友可以參考下2021-09-09
本文主要介紹了在vue中如何使用高德地圖實(shí)現(xiàn)軌跡顯隱的功能,包括了相關(guān)代碼的編寫(xiě)和具體實(shí)現(xiàn)步驟,對(duì)于想要在自己的項(xiàng)目中使用這一功能的開(kāi)發(fā)者有一定的參考價(jià)值,希望大家對(duì)此有所幫助,同時(shí)也歡迎大家多多支持腳本之家2024-10-10