基于vue2.0的活動倒計時組件countdown(附源碼下載)
更新時間：2018年10月09日 08:39:06 作者：月光光
這是一款基于vue2.0的活動倒計時組件，可以使用服務端時間作為當前時間，在倒計時開始和結束時可以自定義回調函數。這篇文章主要介紹了基于vue2.0的活動倒計時組件countdown,需要的朋友可以參考下
這是一款基于vue2.0的活動倒計時組件，可以使用服務端時間作為當前時間，在倒計時開始和結束時可以自定義回調函數。
 |
安裝
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="'小時'" :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>
選項
| 名稱 | 默認值 | 描述 |
| currentTime | ( new Date() ).getTime() | 當前時間戳,如果不傳,默認獲取用戶本地的時間(建議傳服務器的當前時間) |
| startTime | 開始時間戳，必需 | |
| endTime | 結束時間戳，必需 | |
| tipText | 距離開始 | 開始倒計時之前的提示文字 |
| tipTextEnd | 距離結束 | 開始倒計時之后的提示文字 |
| endText | 已結束 | 倒計時結束之后的提示文字 |
| dayTxt | : | 自定義顯示的天數文字 |
| hourTxt | : | 自定義顯示的小時文字 |
| secondsTxt | : | 自定義顯示的分鐘文字 |
| secondsFixed | : | 自定義顯示的秒數文字 |
回調函數
| 名稱 | 默認值 | 描述 |
| start_callback | 開始倒計時結束之后的回調方法 | |
| end_callback | 活動倒計時結束之后的回調方法 |
總結
以上所述是小編給大家介紹的基于vue2.0的活動倒計時組件countdown(附源碼下載)，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網站的支持！
相關文章
詳解Vue3 Composition API中的提取和重用邏輯
這篇文章主要介紹了Vue3 Composition API中的提取和重用邏輯，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-04-04
這篇文章主要介紹了基于Vue實現Mysql數據庫數據模糊查詢,下面文章我們主要實現的是輸入框中輸入數據，根據輸入的結果模糊搜索數據庫對應內容，實現模糊查詢，感興趣的小伙伴可以進入文章我們一起學習2021-12-12
本篇文章主要介紹了Vue.js學習筆記之常用模板語法詳解，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-07-07
這篇文章主要介紹了vue3實現v-model原理詳解，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-10-10
下面小編就為大家分享一篇解決Vue 通過下表修改數組,頁面不渲染的問題。具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03
Vue中el-form標簽中的自定義el-select下拉框標簽功能
這篇文章主要介紹了Vue中el-form標簽中的自定義el-select下拉框標簽功能,本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2020-04-04
今天來說說權限管理，因為網上已經有很多關于這方面的很多內容，下面這篇文章主要給大家介紹了關于vue權限問題的完美解決方案，需要的朋友們下面來一起學習學習吧2019-05-05
這篇文章主要介紹了element中el-select的使用及說明，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-01-01
這篇文章主要介紹了vue keepAlive緩存清除問題案例詳解,本篇文章通過簡要的案例,講解了該項技術的了解與使用,以下就是詳細內容,需要的朋友可以參考下2021-09-09
本文主要介紹了在vue中如何使用高德地圖實現軌跡顯隱的功能,包括了相關代碼的編寫和具體實現步驟,對于想要在自己的項目中使用這一功能的開發(fā)者有一定的參考價值,希望大家對此有所幫助,同時也歡迎大家多多支持腳本之家2024-10-10