基于vue2的canvas時鐘倒計時組件步驟解析

2024-05-06 15:28:13

字體：大中小

來源：轉載

供稿：網友

今天給大家介紹一款基于vue2的canvas時鐘倒計時組件，這個時鐘倒計時組件采用canvas動畫的炫酷動畫效果形式，根據剩余時間的多少變換顏色和旋轉扇形的速度，適合搶購、拍賣、下注等業務場景，且對移動端友好。

具體步驟分析：

假如設定倒計時總時間為15s，變黃色時機為10s，變紅色時機為5s。

1、開始倒計時后顏色為綠色。綠色含義是：倒計時的時間離結束時間還很長。

2、10s后變黃色。黃色的含義是：倒計時的時間離結束時間挺近了，起警告作用。動畫中，出現快速旋轉的扇形。

3、5s后變紅色。紅色的含義是：倒計時的時間馬上就要結束了，起強烈警告作用。動畫中，快速旋轉的扇形速度加快。

4、0s倒計時結束。動畫消失。靜態圓形框中顯示提示文字。

安裝

我們使用npm安裝。

npm install vue-canvas-countdown --save-dev

使用

首先在模板文件中加入組件信息。

<template> <div id="app" @click="fireCD">  <div class="demo">   <countDown     :fire="fire"    time="15"    :tiping="tiping"    :tipend="tipend"    @onEnd="onEnd"/>   </div> </div></template>

然后加入js部分代碼：

<script>import countDown from 'vue-canvas-countdown'export default { name: 'App', components: {  countDown }, data () {  return {   fire: 0,   tiping: {    text: '倒計時進行中',    color: '#fff'   },   tipend: {    text: '倒計時結束',    color: '#fff'   }  } }, methods: {  fireCD () {   // 配置參數（更多配置如下表）   this.tiping = {    text: '請下注',    color: '#fff'   }   this.tipend = {    text: '停止下注',    color: '#fff'   }   // 啟動倒計時(效果如上圖所示)      this.fire++   },  onEnd () {   console.log('倒計時結束的回調函數')  } }}</script>

屬性選項

屬性

類型

單位

默認值

備注

fire:

[Number]

200

必選,在父組件this.fire++ 即可啟動倒計時

width,height:

[Number]