vue封装时间,运用时快速调用

10 篇文章 0 订阅

在utils文件夹中,新建index.js文件。在新建的index.js文件中写入以下代码

/**
 * Parse the time to string
 * @param {(Object|string|number)} time
 * @param {string} cFormat
 * @returns {string | null}
 */
export function parseTime(time, cFormat) {
  if (arguments.length === 0 || !time) {
    return null
  }
  const format = cFormat || '{y}-{m}-{d} {h}:{i}:{s}'
  let date
  if (typeof time === 'object') {
    date = time
  } else {
    if ((typeof time === 'string')) {
      if ((/^[0-9]+$/.test(time))) {
        // support "1548221490638"
        time = parseInt(time)
      } else {
        // support safari
        // https://stackoverflow.com/questions/4310953/invalid-date-in-safari
        time = time.replace(new RegExp(/-/gm), '/')
      }
    }

    if ((typeof time === 'number') && (time.toString().length === 10)) {
      time = time * 1000
    }
    date = new Date(time)
  }
  const formatObj = {
    y: date.getFullYear(),
    m: date.getMonth() + 1,
    d: date.getDate(),
    h: date.getHours(),
    i: date.getMinutes(),
    s: date.getSeconds(),
    a: date.getDay()
  }
  const time_str = format.replace(/{([ymdhisa])+}/g, (result, key) => {
    const value = formatObj[key]
    // Note: getDay() returns 0 on Sunday
    if (key === 'a') { return ['日', '一', '二', '三', '四', '五', '六'][value ] }
    return value.toString().padStart(2, '0')
  })
  return time_str
}

前端运用时,只需写如下代码

<script>
import { parseTime } from "@/utils";
export default {
  },
  </script>

接口传值使用案例如下:

 getTaskCardExpireList() {
      let dateTime = new Date();
      dateTime = dateTime.setDate(dateTime.getDate() - 30);
      dateTime = new Date(dateTime);
      api_getTaskCardList({
        creator: this.$store.state.user.id,
        expireTimeStart: parseTime(dateTime, "{y}-{m}-{d} {h}:{i}:{s}"),
        expireTimeEnd: parseTime(new Date(), "{y}-{m}-{d} {h}:{i}:{s}"),
      }).then((resp) => {
        if (resp.success) {
          this.zuijindaoqiTaskCardList = resp.entity;
        }
      });
    },

页面显示后端时间数据案例如下:

              <div class="profilePhoto">
                <el-avatar
                  icon="el-icon-user-solid"
                  :src="item2.creatorAvatarUrl"
                ></el-avatar>
                <span class="user">{{ item2.creatorName }}</span>
                <span
                  style="float: right; margin-top: 6px; margin-right: 5px"
                  >{{ item2.dueDate | parseTime("{y}-{m}-{d}") }}</span
                >
              </div>
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值