vue-countdown-simple v0.1.3

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参数

Events

Methods

Scoped Slot