相对时间的处理处理

目标：

在vue项目中实现以下时间出现方式

思路：

1. 安装包dayjs
   dayjs: 安装
   时间插件：relativeTime
2. 封装插件
3. 注入插件
4. 在组件中使用

步骤

1.安装包

npm i dayjs
封装模块

2.对日期进行格式化，进行封装以便在其它项目中也能使用。

封装插件：在src/下创建一个xxxx.js文件

import dayjs from 'dayjs'
// 引入中文语言包
import 'dayjs/locale/zh-cn'
// 引入插件 dayjs/plugin/relativeTime
// 在你npm i daysj时，插件已经下载了。
// 具备计算相对时间的功能
import rTime from 'dayjs/plugin/relativeTime'
// 使用插件。固定格式dayjs.extend(插件)
// 使用中文语言包。固定格式
dayjs.locale('zh-cn')
// 使用插件。固定格式dayjs.extend(插件)
dayjs.extend(rTime)
// 时间格式处理函数 例 2020/6/10
export const formateTime = function (val) {
  return dayjs().format('YYYY/DD/MM')
}
// 相对时间处理函数
export const relativeTime = function (mtine) {
  // 使用dayjs提供的api对用户传入的时间 yourTime
  // 进行格式化，以返回一个相对时间
  return dayjs().to(dayjs(mtine))
}

3.在main.js中以全局过滤器的方式引入

要在项目中使用全局过滤器，这样就可以在所有组件内部来使用了。

全局过滤器的格式
定义：
Vue.filter(‘过滤器名’，function(过滤前的值){return 过滤之后的值})

import { relativeTime } from '@/xxx.js'  // xxx.js  对应步骤2里面封装的文件路径
// 定义一个全局过滤器
+ Vue.filter('relativeTime', relativeTime)

4.使用

任意组件中 都可以使用

<template>
{{val | 过滤器}}
</template>