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

【问题标题】：How to use the vue-countdown-timer package in your Vue JS project如何在你的 Vue JS 项目中使用 vue-countdown-timer 包
【发布时间】：2021-07-30 08:55:56
【问题描述】：

我正在尝试使用 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>

我做错了什么？

【问题讨论】：

您是否有支持单文件组件的捆绑程序设置？你能创建一个minimal reproducible example吗？
嗨，我提供的代码是我的全部代码
是的，但您尚未指定您的环境。只是在浏览器中加载的 js 文件？创建Vue应用程序？捆绑器？

标签： javascript vue.js vuejs2 timer

【解决方案1】：

所以，您收到该错误是因为它不是组件实际上是一个插件。所以你需要做的是：

转到您的插件文件夹并创建一个名为“vue-circular-count-down.js”的插件。在此粘贴此代码：

import Vue from 'vue'; 
import CircularCountDownTimer from "vue-circular-count-down-timer";
Vue.use(CircularCountDownTimer);

然后转到您的 nuxt.config.js 文件并添加插件，如下所示：插件：['~/plugins/vue-circular-count-down.js'].

现在您可以在应用程序的任何位置使用它。

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

您还可以查看如何添加插件 https://nuxtjs.org/docs/2.x/directory-structure/plugins

【讨论】：

【解决方案2】：

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

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

【讨论】：