vue时间封装

前言

一般情况下，后台人员返回给我们的时间格式要么是 “1999-02-07T21:35:56.157Z” ，要么就是一串时间戳，例： “1641963929” ，那为了统一格式，我们需要将时间转换成统一的格式，下面分享两种不同情况下对于时间格式的转换。

第一种："1999-02-07T21:35:56.157Z" 格式

首先我们先建立一个公共的js文件，然后在main.js中引入并注册，最后在组件中使用即可。

formatDate.js文件

import Vue from "vue";
Vue.filter('formatDate', function (originVal) {
  const dt = new Date(originVal)
  const y = dt.getFullYear()
  const m = (dt.getMonth() + 1 + '').padStart(2, '0')
  const d = (dt.getDate() + '').padStart(2, '0')
  const hh = (dt.getHours() + '').padStart(2, '0')
  const mm = (dt.getMinutes() + '').padStart(2, '0')
  const ss = (dt.getSeconds() + '').padStart(2, '0')
  return `${y}-${m}-${d} ${hh}:${mm}:${ss}`
})

main.js文件

//时间过滤引入并注册
import * as formatDate from './components/formatDate' //引入
Vue.use(formatDate) //注册

组件中使用

示例

<template>
  <div>
    <p>开始时间：{{timeDate | formatDate}}</p>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        timeDate: "1999-02-07T21:35:56.157Z",
      }
    },
  }
</script>

效果展示

第二种："1641964865" 格式

同上，我们先建立一个公共的js文件，然后在main.js中引入并注册，最后在组件中使用即可。

timestamp.js文件

import Vue from "vue";
Vue.filter("ProductDate", function (value) {
    const time = new Date(value * 1000);
    const Y = time.getFullYear()
    const M = (time.getMonth() + 1).toString().padStart(2, '0')
    const D = time.getDate().toString().padStart(2, '0')
    const h = time.getHours().toString().padStart(2, '0')
    const m = time.getMinutes().toString().padStart(2, '0')
    const s = time.getSeconds().toString().padStart(2, '0')
    return `${Y}-${M}-${D} ${h}:${m}:${s}`
})

main.js文件

//时间戳转换引入并注册
import * as timestamp from './components/timestamp'
Vue.use(timestamp)

组件中使用

示例

<template>
  <div>
    <p>结束时间：{{timeDateTwo | productDate}}</p>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        timeDateTwo: "1641964865"
      }
    },
  }
</script>

效果展示

到这里，两种情况的封装都已经完成了，大家在使用的时候可以根据后端返回的格式选择使用哪一种方法转换。

拓展延伸

获取当天开始时间 — 结束时间 2022-01-14 00:00:00 — 2022-01-14 23:59:59

<template>
  <div></div>
</template>
<script>
  export default {
    data() {
      return {
        gather: {
          startTime: "", //开始时间
          endTime: "", //结束时间
        },
      }
    },
    mounted() {
      // this.dateFormat 调用时间方法
      this.gather.startTime = this.dateFormat(new Date(new Date(new Date().toLocaleDateString()).getTime()));
      console.log(this.gather.startTime, "开始时间");
      this.gather.endTime = this.dateFormat(new Date(new Date(new Date().toLocaleDateString()).getTime() + 24 * 60 *
        60 * 1000 - 1));
      console.log(this.gather.endTime, "结束时间");
    },
    methods: {
      //时间方法
      dateFormat: function (time) {
        let date = new Date(time);
        let year = date.getFullYear();
        // 在日期格式中，月份是从0下标开始的，所以我们要再最后面+1
        // 使用三元表达式在小于10的前面补0，以达到格式统一  如 08:01:01
        let month =
          date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;
        let day = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
        let hours = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
        let minutes = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
        let seconds = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
        // 将年月日时分秒拼接在一起
        return year + "-" + month + "-" + day + " " + hours + ":" + minutes + ":" + seconds;
      },
    }
  }
</script>