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}}