封装Vue倒计时组件vuecountdown(详细教程)

由于开发需要，捣鼓了一个倒计时组件！特此分享，希望帮助到大家

先看效果

倒计时

来看流程，由于组件上传到远程仓库，大家可直接下载使用 

npm下载

npm install --save-dev dircountdown

cnpm下载

cnpm install --save-dev dircountdown

页面代码

<template>
<div class="box">
<button @click="startCount">开始计时</button>
<div class="myCountdown">
            <count-down
              :start="startSecond"
              end="0"
              style="color: #fff"
              v-on:endcallback="endFn"
              :autoshow="false"
              splitsymbol="时-分-秒"
              :autostart="false"
              ref="countdown"
            ></count-down></div
</div>
</template>
<script>
import CountDown from "dircountdown";
export default {
  data() {
    return {
      startSecond: "120", //开始时间，以秒为单位
    };
  },

  methods: {
//倒计时启动事件
    startCount() {
      this.$refs.countdown.countTime();
      console.log("999", this.$refs.countdown);
    },
//弹窗事件
    endFn() {
      alert("考试时间到!请切到最後一題提交答案");
    },
  },
  components: { CountDown },
 
};
</script>
<style lang="scss" scoped>
.box {
  height: 50px;
  display: flex;
  justify-content: space-between; //样式可以根据自己需求写
  align-items: center;
  background-color: #79213a;
  color: #fff;
  padding: 0 10px;
}
</style>

组件相关属性：