在vue里使用sdn形式引入dayjs

时间:2020-12-29 01:11:16

我是在html里用cdn引入dayjs
cdn路径
https://unpkg.com/dayjs@1.11.7/dayjs.min.js
插件路径
https://unpkg.com/dayjs@1.11.7/plugin/duration.js
修改duration为你需要引入的插件名
例如https://unpkg.com/dayjs@1.11.7/plugin/calendar.js 就可以了
在vue里使用sdn形式引入dayjs
在js里使用dayjs 以及在cdn引入的方式下 如何去继承 dayjs的插件
继承dayjs的插件 不再使用这样去引入dayjs.extend(calendar)
而是用 dayjs.extend(window.dayjs_plugin_duration)
同样的只要修改后面的后缀名即可 格式是 dayjs.extend(window.dayjs_plugin_插件名)
例如 dayjs.extend(window.dayjs_plugin_calendar)
调用插件的时候只要用dayjs就行了 不要用dayjs() 去调用
在vue里使用sdn形式引入dayjs
这里实现一个倒计时

    countDown() {
    //  获取开始时间 和结束时间
      const startTime = dayjs();
      const endTime = dayjs(this.endTime); 
        //  结束时间 减去 开始时间  获取时间戳
      let count = dayjs(this.endTime).valueOf() - dayjs().valueOf()
      // 通过时间戳 判断是否结束倒计时
			if (count < 0) {
				clearInterval(this.countSetInterval)
	    //  结束考试
      this.$emit('overTime')
      return
			}
    //  x.diff(y) 获取两个时刻之间的时长
    const duration = dayjs.duration(endTime.diff(startTime));
    // 转化为分钟和秒
    let minutes = duration.minutes();
    let seconds = duration.seconds();
    // 如果超过一个小时 就把超过一小时的时间加到分钟上
    if (duration.asHours() >= 1) {
      minutes += Math.floor(duration.asHours()) * 60;
    }
    // 格式化成 mm:ss
   this.formattedTime = `${minutes}:${seconds.toString().padStart(2, '0')}`;
		},