基于vue2的canvas时钟倒计时组件步骤解析

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>

< >

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(\'倒计时结束的回调函数\')
  }
 }
}
</ >