日期格式化插件dayjs在vue中如何使用

1. 下载dayjs

cnpm install dayjs --save

2. 创建untils/formate.js

import dayjs from 'dayjs'
import rTime from 'dayjs/plugin/relativeTime'

// 全局使用中文
dayjs.locale('zh-cn')

// 对时间进行格式化
export function formatTime(data = new Date(), type = 'YYYY-MM-DD') {
  return dayjs(data).format(type)
}

// 其它例如相对时间，需要单独配置它自己的插件才可以使用
dayjs.extend(rTime)

export const relativeTime = value => {
  return dayjs().to(dayjs(value))
}

export default {
  formatTime,
  relativeTime
}

3. 挂在全局，封装过滤器，main.js

import { formatTime, relativeTime } from './utils/formate'

Vue.prototype.$formatTime = formatTime
Vue.prototype.$relativeTime = relativeTime

// 过滤器
Vue.filter('relativeTime', relativeTime)
Vue.filter('formatTime', formatTime)

4. 在js环境中使用

this.$formatTime(new Date(),'YYYY-MM-DD')

5. 在vue模板中使用过滤器

 {{new Date()|formatTime}}
 {{new Date('2022-01-01')|relativeTime}}