Question

我想在我的vue组件中添加倒计时器。我找到了一个用普通JavaScript编写的脚本。这是我的JavaScript文件。

var upgradeTime = 7200;
var seconds = upgradeTime;
function timer() {
   var days        = Math.floor(seconds/24/60/60);
   var hoursLeft   = Math.floor((seconds) - (days*86400));
   var hours       = Math.floor(hoursLeft/3600);
   var minutesLeft = Math.floor((hoursLeft) - (hours*3600));
   var minutes     = Math.floor(minutesLeft/60);
   var remainingSeconds = seconds % 60;
   if (remainingSeconds < 10) {
       remainingSeconds = "0" + remainingSeconds;
   }
   document.getElementById('countdown').innerHTML = hours + ":" + minutes + ":" + remainingSeconds;
   if (seconds == 0) {
       clearInterval(countdownTimer);
       document.getElementById('countdown').innerHTML = "Completed";
   } else {
       seconds--;
   }
}
var countdownTimer = setInterval('timer()', 1000);

我在vue js projects src文件夹中将其存储为 clock.js 。如何将此 clock.js 文件导入我的vue组件并获取输出。

对于这个JavaScript代码，获得输出的正常方式将是这样的

<span id="countdown" class="timer"></span>

但是如何在vue组件中获得输出。我是初级开发人员，我对如何在vue中使用普通JavaScript一无所知。我希望你理解我的问题。谢谢

Answer 1

如果你真的想要一个简单直接的解决方案，你可以简单地将所有这些解决方案放在mounted回调中：即解析组件模板并构造DOM时，#countdown应该当时可以访问。 Read more about lifecycle hooks in VueJS

注意：但是，如果您想真正学习如何正确使用VueJS，请继续阅读如何在本答案结尾处创建自定义计时器组件:)将所有内容填入mounted回调，你错过了编写你的第一个相当简单的VueJS组件的有趣部分。

在开始之前，请注意在timer()回调中调用setInterval时出现错误。它应该是：

var countdownTimer = setInterval(timer, 1000);

这是一个概念验证示例，您可以将所有计时器逻辑“火鸡”填充到mounted()回调中：

new Vue({
  el: '#app',
  template: '#custom-component',
  mounted: function() {
    var upgradeTime = 7200;
    var seconds = upgradeTime;

    function timer() {
      var days = Math.floor(seconds / 24 / 60 / 60);
      var hoursLeft = Math.floor((seconds) - (days * 86400));
      var hours = Math.floor(hoursLeft / 3600);
      var minutesLeft = Math.floor((hoursLeft) - (hours * 3600));
      var minutes = Math.floor(minutesLeft / 60);
      var remainingSeconds = seconds % 60;
      if (remainingSeconds < 10) {
        remainingSeconds = "0" + remainingSeconds;
      }
      document.getElementById('countdown').innerHTML = hours + ":" + minutes + ":" + remainingSeconds;
      if (seconds == 0) {
        clearInterval(countdownTimer);
        document.getElementById('countdown').innerHTML = "Completed";
      } else {
        seconds--;
      }
    }
    var countdownTimer = setInterval(timer, 1000);
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.min.js"></script>
<div id="app"></div>

<script type="text/x-template" id="custom-component">
  <div>
    <p>I am a custom component.</p>
    <p>
      My timer:<br />
      <span id="countdown" class="timer"></span>
    </p>
  </div>
</script>

一个真正理想的解决方案是为您的倒数计时器实际创建一个自定义VueJS组件;）您可以通过为计时器本身创建另一个自定义组件来实现此目的。一些提示和技巧：

使用props以便您可以传入自定义时间段
请记住使用data复制时间段，因为您正在递减计时器，但不能改变道具
使用this.$el来引用您的计时器组件，然后您甚至可以在没有id引用的情况下进行操作;）

见下面的概念验证：

Vue.component('my-timer', {
  template: '#my-timer',
  props: {
    upgradeTime: Number
  },
  data: function () {
    return { seconds: this.upgradeTime }
  },
  methods: {
    timer: function() {
      var days = Math.floor(this.seconds / 24 / 60 / 60);
      var hoursLeft = Math.floor((this.seconds) - (days * 86400));
      var hours = Math.floor(hoursLeft / 3600);
      var minutesLeft = Math.floor((hoursLeft) - (hours * 3600));
      var minutes = Math.floor(minutesLeft / 60);
      var remainingSeconds = this.seconds % 60;
      if (remainingSeconds < 10) {
        remainingSeconds = "0" + remainingSeconds;
      }
      this.$el.innerHTML = hours + ":" + minutes + ":" + remainingSeconds;
      if (this.seconds == 0) {
        clearInterval(countdownTimer);
        this.$el.innerHTML = "Completed";
      } else {
        this.seconds--;
      }
    }
  },
  mounted: function() {
    setInterval(this.timer, 1000);
  },
});

new Vue({
  el: '#app',
  template: '#custom-component'
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.min.js"></script>
<div id="app"></div>

<script type="text/x-template" id="custom-component">
  <div>
    <p>I am a custom component.</p>
    <p>
      My timer:<br />
      <my-timer upgrade-time="7200"></my-timer>
    </p>
  </div>
</script>

<script type="text/x-template" id="my-timer">
  <span class="timer"></span>
</script>

Answer 2

最好只从该代码中生成一个CountdownTimer组件。也许看看at this post: countdown-timer-using-vuejs

使用普通JavaScript的VueJS

2 个答案: