vue自学,main.js文件配置引入时间日期格式化自定义函数

vue自学,main.js文件配置引入时间日期格式化自定义函数！视频里老师讲解了一些基础的配置，但是，老师的视频里，传入的参数是错误的，老师视频内传入了参数是一个时间戳。实际上，应该传入的是：“2023-2-25 9:10:10”这种类型，才能正常解析执行。下面是成功后的截图。

如图，显示的是正常的，8小时前，1天前，52分钟前，说明自定义的时间函数执行了。并且返回了结果。

1：自定义的函数，time.js内容如下：

export function formatTime(time) {
    const d = new Date(time)
    const now = Date.now()

    const diff = (now - d) / 1000

    if (diff < 30) {
        return '刚刚'
    } else if (diff < 3600) {
        return Math.ceil(diff / 60) + '分钟前'
    } else if (diff < 3600 * 24) {
        return Math.ceil(diff / 3600) + '小时前'
    } else if (diff < 3600 * 24 * 2) {
        return '1天前'
    }
    return time
    
}

2：配置一下，main.js

一个是导入刚刚自己创建的js文件，第二个是让vue组件的过滤器里，注册一下，给它取个名字，“format”。这样就可以在其他组件内使用这个名字来发挥过滤器的效力了。

3：在ArticleItem.vue组件内就可以使用了。

如图，在脚本配置内，导入这个函数，在属性值后面就可以直接用format来过滤时间内容了。

其实就是一个简单的时间的业务处理。

题外话：

main.js里面配置的引入，是全局有效果的。

在自定义组件内，script里再次引入其实是多余的。我测试了，注释掉后，依然可以正常执行的。大家可以自己试试看。