Javascript 我想在vue js中使用https://jsfiddle.net/umjex9yL/

我已经创建了一个vue.js项目，并希望在此项目中添加一个计时器。我找到的倒计时计时器由vanilla javascript的https://jsfiddle.net/umjex9yL/"

对映元件

<template>
  <ul class="vuejs-countdown">
    <li v-if="days > 0">
      <p class="digit">{{ days | twoDigits }}</p>
      <p class="text">{{ days > 1 ? "days" : "day" }}</p>
    </li>
    <li>
      <p class="digit">{{ hours | twoDigits }}</p>
      <p class="text">{{ hours > 1 ? "hours" : "hour" }}</p>
    </li>
    <li>
      <p class="digit">{{ minutes | twoDigits }}</p>
      <p class="text">min</p>
    </li>
    <li>
      <p class="digit">{{ seconds | twoDigits }}</p>
      <p class="text">Sec</p>
    </li>
  </ul>
</template>

<script>
let interval = null;
export default {
  name: "vuejsCountDown",
  props: {
    deadline: {
      type: String
    },
    end: {
      type: String
    },
    stop: {
      type: Boolean
    }
  },
  data() {
    return {
      now: Math.trunc(new Date().getTime() / 1000),
      date: null,
      diff: 0
    };
  },
  created() {
    if (!this.deadline && !this.end) {
      throw new Error("Missing props 'deadline' or 'end'");
    }
    let endTime = this.deadline ? this.deadline : this.end;
    this.date = Math.trunc(Date.parse(endTime.replace(/-/g, "/")) / 1000);
    if (!this.date) {
      throw new Error("Invalid props value, correct the 'deadline' or 'end'");
    }
    interval = setInterval(() => {
      this.now = Math.trunc(new Date().getTime() / 1000);
    }, 1000);
  },
  computed: {
    seconds() {
      return Math.trunc(this.diff) % 60;
    },
    minutes() {
      return Math.trunc(this.diff / 60) % 60;
    },
    hours() {
      return Math.trunc(this.diff / 60 / 60) % 24;
    },
    days() {
      return Math.trunc(this.diff / 60 / 60 / 24);
    }
  },
  watch: {
    now(value) {
      this.diff = this.date - this.now;
      if (this.diff <= 0 || this.stop) {
        this.diff = 0;
        // Remove interval
        clearInterval(interval);
      }
    }
  },
  filters: {
    twoDigits(value) {
      if (value.toString().length <= 1) {
        return "0" + value.toString();
      }
      return value.toString();
    }
  },
  destroyed() {
    clearInterval(interval);
  }
};
</script>
<style>
.vuejs-countdown {
  padding: 0;
  margin: 0;
}
.vuejs-countdown li {
  display: inline-block;
  margin: 0 8px;
  text-align: center;
  position: relative;
}
.vuejs-countdown li p {
  margin: 0;
}
.vuejs-countdown li:after {
  content: ":";
  position: absolute;
  top: 0;
  right: -13px;
  font-size: 32px;
}
.vuejs-countdown li:first-of-type {
  margin-left: 0;
}
.vuejs-countdown li:last-of-type {
  margin-right: 0;
}
.vuejs-countdown li:last-of-type:after {
  content: "";
}
.vuejs-countdown .digit {
  font-size: 32px;
  font-weight: 600;
  line-height: 1.4;
  margin-bottom: 0;
}
.vuejs-countdown .text {
  text-transform: uppercase;
  margin-bottom: 0;
  font-size: 10px;
}
</style>

{{天|两位数}
{{days>1？”days:“day”}


{{hours | twodights}
{{hours>1？”小时：“hours”}


{{分钟|两位数}
min


{{秒|两位数}
秒


设区间=null；
导出默认值{
名称：“VUEJSHONTDOWN”，
道具：{
截止日期：{
类型：字符串
},
完:{
类型：字符串
},
停止：{
类型：布尔型
}
},
数据（）{
返回{
现在：Math.trunc（new Date（）.getTime（）/1000），
日期：空，
差异：0
};
},
创建（）{
如果（！this.deadline&&！this.end）{
抛出新错误（“缺少道具‘截止日期’或‘结束’”）；
}
让endTime=this.deadline？this.deadline:this.end；
this.date=Math.trunc（date.parse（endTime.replace（/-/g，“/”））/1000）；
如果（！此日期）{
抛出新错误（“道具值无效，请更正“截止日期”或“结束”）；
}
间隔=设置间隔（（）=>{
this.now=Math.trunc（new Date（）.getTime（）/1000）；
}, 1000);
},
计算：{
秒（）{
返回Math.trunc（this.diff）%60；
},
会议记录（）{
返回Math.trunc（this.diff/60）%60；
},
小时数{
返回Math.trunc（this.diff/60/60）%24；
},
天（）{
返回Math.trunc（this.diff/60/60/24）；
}
},
观察：{
现在（价值）{
this.diff=this.date-this.now；
如果（this.diff）看起来您包含的倒计时组件错误-您使用的是
而不是

<template>
  <div class="home">
    <HomeComponent msg="Welcome to Your Vue.js App" />
    <div>
      <h3>counter</h3>
    </div>

    <b-button id="openmodal" ref="openmodal" @click="showModal">
      Show Modal
    </b-button>

    <b-modal
      id="mymodal"
      ref="my-modal"
      centered
      title="Modal with Popover"
      ok-only
    >
      <p>
        This
        <b-button v-b-popover="'Popover inside a modal!'" title="Popover">
          Button </b-button
        >triggers a popover on click.
      </p>
      <p>
        This
        <a v-b-tooltip href="#" title="Tooltip in a modal!">Link</a> will show a
        tooltip on hover.
      </p>
    </b-modal>
    <div id="app">
      <div>
        <Countdown end="August 22, 2022"></Countdown>
      </div>
    </div>
  </div>
</template>

<script>
// @ is an alias to /src
import HomeComponent from "@/components/HomeComponent.vue";
import CounterComponent from "@/components/CounterComponent.vue";

import { actions } from "../SimpelStore";

export default {
  name: "Home",

  components: {
    HomeComponent,
    CounterComponent
  },
  computed: {
    username() {
      // We will see what `params` is shortly
      return this.$route.params.username;
    }
  },
  mounted() {
    // this.showModal();
    actions.getCount();
    // const filmId = this.getParamsId()
  },
  methods: {
    goBack() {
      window.history.length > 1 ? this.$router.go(-1) : this.$router.push("/");
    },
    showModal() {
      this.$refs["my-modal"].show();
    }
  }
};
</script>
<style>
#app {
  align-items: center;
  bottom: 0;
  background-color: #34495e;
  display: flex;
  justify-content: center;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
}
</style>