Package Exports

vue2-countdown-component
vue2-countdown-component/dist/vue2-countdown-timer.umd.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (vue2-countdown-component) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

基于 Vue2 简单的倒计时组件

安装依赖

npm install vue2-countdown-component

全局引入

<CountdownTimer ref="countdownRef" :duration="10">
  <template #header>
    <span>头部插槽</span>
  </template>
  <template #footer>
    <span>尾部插槽</span>
  </template>
</CountdownTimer>

// main.js
import CountdownTimer from "vue2-countdown-component";
Vue.component("CountdownTimer", CountdownTimer);

按需引入

<CountdownTimer ref="countdownRef" :duration="10">
  <template #header>
    <span>头部插槽</span>
  </template>
  <template #footer>
    <span>尾部插槽</span>
  </template>
</CountdownTimer>


import CountdownTimer from "vue2-countdown-component";

export default{
  components:{
    CountdownTimer
  }
}

参数

duration: {
  type: Number,
  required: true,
  default: 60,
}

事件

序号	事件	描述
1	start	倒计时开始
2	end	倒计时结束
3	stop	倒计时暂停

事件调用方法

 this.$refs.[ref].start(); // 开始
 this.$refs.[ref].stop(); // 暂停

事件监听

<countdown-timer ref="countdownRef" :duration="10"
@end="listenEnd" @stop="listenStop" >
</countdown-timer>

listenStop() {
  this.msg = "倒计时已暂停";
},
listenEnd() {
  this.msg = "倒计时已结束";
},

插槽

序号	事件	描述
1	header	自定义前面的内容
2	footer	自定义后面的内容