插件系列 => 时间格式化 DayJs 多少时间之前

本文介绍了如何在Vue中创建一个全局时间过滤器`relativeTime`,用于显示相对时间,并展示了在 vant 框架中如何结合dayjs设置和格式化出生年月日。在代码中,作者通过dayjs插件处理了时间格式的转换,同时指出了在实际使用中`format`拼写错误的问题。
摘要由CSDN通过智能技术生成

1.创建timeFilter.js文件

import Vue from 'vue';
import dayjs from 'dayjs';
import 'dayjs/locale/zh-cn';
import relativeTime from 'dayjs/plugin/relativeTime';

dayjs.extend(relativeTime);
dayjs.locale('zh-cn');

// 全局过滤器:处理相对时间
Vue.filter('relativeTime', (value) => {
    return dayjs().to(dayjs(value));
});

2.结构使用

<span>{{ articleItem.pubdate | relativeTime }}</span>

结合vant设置出生年月日

import dayjs from 'dayjs';
 async onConfirm(val) {
            const time = dayjs(val).format('YYYY-MM-DD');
            const [err, res] = await asyncErrorHandler(
                editUserprofileAjax({
                    birthday: time,
                })
            );
            if (err) return this.$toast.fail('设置生日失败');
            this.$toast.success('设置生日成功');
            this.$emit('input', time);
            this.$emit('close');
            console.log(err, res);
        },

这里我错误的位置就是dayjs(val).format('YYYY-MM-DD');fornat写成了formate

  • 2
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

不停喝水

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值