javascript - 如何在你的 Vue JS 项目中使用 vue-countdown-timer 包

Question

我正在尝试在我的项目中使用vue-count-down-timer包，但在控制台中我收到错误Failed to mount component: template or render function not defined。

<template>
  <div>
    <circular-count-down-timer
        :initial-value="360500"
    ></circular-count-down-timer>
  </div>
</template>

<script>
import CircularCountDownTimer from "vue-circular-count-down-timer";

  export default {
    components: {
      CircularCountDownTimer
    },
      methods: {
        finished: () => {
          console.log('finished');
        },
        updated: (status) => {
          console.log(status);    //{"value": 144, "seconds": 24, "minutes": 2, "hours": 0}
        }
      }
  }
</script>

我究竟做错了什么？

标签： javascriptvue.jsvuejs2timer

Answer 1

我决定使用不同的方法，但得到了相同的结果

<template>
  <div class="radial-progress-bar">
    <vue-countdown :time="1 * 24 * 60 * 60 * 1000" v-slot="{hours, minutes, seconds }">

    <div style="display: flex">
      <div>
      <radial-progress-bar
        :diameter="48"
        :completed-steps="hours"
        :total-steps="60"
        :animateSpeed="800"
        :strokeWidth="3"
        :innerStrokeWidth="4"
        :startColor="`#CC003D`"
        :stopColor="`#CC003D`"
        :innerStrokeColor="`#E5E5E5`">
      <p class="completedSteps" style="font-size: 12px">{{hours}}h</p>
    </radial-progress-bar>
    </div>

     <div>
          <radial-progress-bar
        :diameter="48"
        :completed-steps="minutes"
        :total-steps="60"
        :animateSpeed="800"
        :strokeWidth="3"
        :innerStrokeWidth="4"
        :startColor="`#CC003D`"
        :stopColor="`#CC003D`"
        :innerStrokeColor="`#E5E5E5`">
      <p class="completedSteps" style="font-size: 12px">{{minutes}}m</p>
    </radial-progress-bar>
     </div>

      <div>
          <radial-progress-bar
        :diameter="48"
        :completed-steps="seconds"
        :total-steps="60"
        :animateSpeed="800"
        :strokeWidth="3"
        :innerStrokeWidth="4"
        :startColor="`#CC003D`"
        :stopColor="`#CC003D`"
        :innerStrokeColor="`#E5E5E5`">
      <p class="completedSteps" style="font-size: 12px">{{seconds}}s</p>
    </radial-progress-bar>
      </div>
    </div>

    </vue-countdown>

  </div>
</template>

<script>
import RadialProgressBar from "vue-radial-progress";
import VueCountdown from '@chenfengyuan/vue-countdown';

export default {
  name: "TopProgressBar",

  
  data() {
    return {
      timerSeconds: '',
      roundToQuarter: date => new Date(Math.round(date / 9e5) * 9e5),
      totalSteps: 100,
      progressItems: [{ completedSteps: 13 }, { completedSteps: 23 }, { completedSteps: 48 },]
    };
  },

  components: {
    RadialProgressBar, VueCountdown
  },
};
</script>