Package Exports

vue-countdown-simple
vue-countdown-simple/dist/index.common.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 (vue-countdown-simple) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Vue 倒计时插件

安装

  npm i vue-countdown-simple --save

main.js 引入

import Vue from 'vue'
import CountDown from "vue-countdown-simple";
Vue.use(CountDown)

组件中引入

<script>
import { CountDown } from "vue-countdown-simple";
export default {
   components: { CountDown }
}
</script>

基本使用

<CountDown :time="30000" format="HH:MM:SS" />

自定义样式及更多用法

方式1：通过绑定change回调的值，进行自定义格式

方式2：通过作用域插槽scope

<template>
  <div>
   <CountDown
      :time="30 * 60 * 60 * 1000"
      :millisecond="true"
      :autoStart="false"
      format="HH:mm:ss:ms"
      ref="countDown"
      @changeRun="onChangeRun"
    >
     <!-- 作用域插槽sccpe -->
      <template v-slot="scope">
        <span>天： {{ scope.timeData.days }}</span>
        <span>小时： {{ scope.timeData.hours }}</span>
        <span>分钟： {{ scope.timeData.minutes }}</span>
        <span>秒： {{ scope.timeData.seconds }}</span>
        <span>毫秒： {{ scope.timeData.milliseconds }}</span>
      </template>
    </CountDown>
    <button @click="reset">重置</button>
    <button @click="start" v-if="!isRuning">开始</button>
    <button @click="pause" v-else>暂停</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isRuning: false,
    };
  },
  methods: {
    //开始
    start() {
      this.$refs.countDown.start();
    },
    // 暂停
    pause() {
      this.$refs.countDown.pause();
    },
    // 重置
    reset() {
      this.$refs.countDown.reset();
    },
    //计时器的运行状态
    onChangeRun(e) {
      this.isRuning = e;
    },
  },
};
</script>

<style>
</style>

Props参数

属性	说明	类型	默认值
time	倒计时时长，单位ms	String \| Number	0
format	时间格式，DD-日，HH-时，mm-分，ss-秒，ms-毫秒,无需大小写	String	HH:mm:ss
autoStart	是否自动开始倒计时	Boolean	true
millisecond	是否展示毫秒倒计时	Boolean	false

Events

事件名	说明	回调参数
changeRun	倒计时是否正在运行中。autoStart=false，并且手动开启倒计时时才会触发	true:正在运行.false: 停止运行中
change	过程中，倒计时变化时触发	剩余的时间
finish	倒计时结束

Methods

名称	说明
start	开始倒计时
pause	暂停倒计时
reset	重置倒计时

Scoped Slot

name	说明
——	自定义列的内容，参数为 { formattedTime:剩余的时间格式化之前，timeData:剩余的时间格式化后 }