Mpvue微信小程序时间消耗进度条组件的实现

实现效果：

组件源码：

组件主要涉及时间的计算、闰年的判断，比较简单，因此注释比较少。
<progress></progress>组件为微信小程序官方的进度条。

<template>
  <div class="year-progess">
    <progress :percent="percent" activeColor="#EA5A49"/>
    <p>{{year}}已经过去{{days}}天，{{percent}}%</p>
  </div>
</template>

<script>
export default {
  computed: {
    // 过了多少天
    days () {
      // 第一天
      let start = new Date()
      start.setMonth(0)
      start.setDate(1)
      // 今天的时间戳减去第一天的时间戳
      let offset = new Date().getTime() - start.getTime()
      return parseInt(offset / 1000 / 3600 / 24) + 1
    },
    // 今年是什么年
    year () {
      return new Date().getFullYear()
    },
    percent () {
      return (this.days / this.getDayOfYear() * 100).toFixed(1)
    }
  },
  methods: {
    // 判断是否是闰年
    isLeadYear () {
      const year = new Date().getFullYear()
      if (year % 400 === 0) {
        return true
      } else if (year % 4 === 0 && year % 100 !== 0) {
        return true
      } else {
        return false
      }
    },
    // 获取当前年份的天数
    getDayOfYear () {
      return this.isLeadYear ? 366 : 365
    }
  }
}
</script>

<style lang="less" scoped>
 .year-progess {
   width: 100%;
   margin-bottom: 20px;
   progress { margin-bottom: 10px;
   }
 }
</style>

引用方法

在小程序pages中需要引用此组件的vue文件中引用即可，与vue引用方法一致，即：
引入：

import VYearProgess from '@/components/YearProgress'

注册：

components: {
  VYearProgess
}

应用：

<v-year-progess></v-year-progess>