Metis

用Vue中的全局filter格式化日期时间格式

2020-12-03  本文已影响0人  万州客

这个思路,不分antd或element这些,只要使用Vue的,都是一致的。

一,在全局vue中注册filter

当然也可以在utils.js这类文件中定义timeStrFormat这些函数,但如果用得多,我觉得filter更方便,不用每次导入
在vue项目的全局性组件文件注册filter

import Vue from 'vue'
import App from './App.vue'
import {initRouter} from './router'
import './theme/index.less'
import Antd from 'ant-design-vue'
import Viser from 'viser-vue'
import '@/mock'
import store from './store'
import 'animate.css/source/animate.css'
import Plugins from '@/plugins'
import {initI18n} from '@/utils/i18n'
import bootstrap from '@/bootstrap'
import moment from 'moment'

const router = initRouter(store.state.setting.asyncRoutes)
const i18n = initI18n('CN', 'US')

Vue.use(Antd)
Vue.config.productionTip = false
Vue.use(Viser)
Vue.use(Plugins)
//注册了两个时间格式化过滤器,一个格式化到天,一个格式化到秒
Vue.filter('dayFormat', function(dataStr, pattern='YYYY-MM-DD'){
    return moment(dataStr).format(pattern)
})
Vue.filter('minFormat', function(dataStr, pattern='YYYY-MM-DD HH:mm:ss'){
    return moment(dataStr).format(pattern)
})

这样注册以后,就可以在子组件文件中使用this.$options.filters.dayFormat()这样的调用,来格式化时间了。

二,在子组件文件中使用filter

如果record.startDate是一个时间格式字符串,可能很长,还带T,微秒时间等

const time = `${this.$options.filters.dayFormat(record.startDate)}

输出即为2020-01-01这样的格式。
方便。

上一篇 下一篇

猜你喜欢

热点阅读