Encapsulate Vue countdown component vuecountdown (detailed tutorial)

Due to development needs, a countdown component has been tinkered with! Hereby share, hope to help everyone

first look at the effect

countdown

Look at the process, since the components are uploaded to the remote warehouse, you can download and use them directly 

npm download

npm install --save-dev dircountdown

cnpm download

cnpm install --save-dev dircountdown

page code

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

Component related properties: