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

这个思路,不分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这样的格式。
方便。

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容