vue 封装时间格式处理

使用dayjs 对时间戳进行转换

• dayjs相关文档

处理方法

• 在vue项目utils目录中，新建一个DateFormat.js文件

import dayjs from "dayjs";
// 日期格式化 YYYY-MM-DD
export const DateFormat = val => {
    if (val) {
        return dayjs(val).format("YYYY-MM-DD") == "Invalid date" ?
            "" :
            dayjs(val).format("YYYY-MM-DD");
    } else {
        return null;
    }
};

// 日期时间格式化 YYYY-MM-DD HH:MM:SS
export const DateTimeFormat = val => {
    if (val) {
        return dayjs(val).format("YYYY-MM-DD HH:mm") == "Invalid date" ?
            "" :
            dayjs(val).format("YYYY-MM-DD HH:mm");
    } else {
        return null;
    }
};
// 日期时间格式化HH:MM:SS
export const TimeFormat = val => {
    if (val) {
        return dayjs(val).format("HH:mm:ss") == "Invalid date" ?
            "" :
            dayjs(val).format("HH:mm:ss");
    } else {
        return null;
    }
};

export default {
    install(Vue, Opt) {
        // 筛选器
        // 日期格式化 HH:MM:SS
        Vue.filter("TimeFormat", val => {
            return TimeFormat(val);
        });
        // 日期格式化 YYYY-MM-DD
        Vue.filter("DateFormat", val => {
            return DateFormat(val);
        });
        // 日期时间格式化 YYYY-MM-DD HH:mm:ss
        Vue.filter("DateTimeFormat", val => {
            return DateTimeFormat(val);
        });
    }
};

• 在main.js中引入 挂载到vue上

import Vue from "vue";
import App from "./App";
import router from "./router";

// 清除浏览器默认样式
import "normalize.css";
import "less";

// 引入ElementUI
import ElementUI from "element-ui";
import "sgm-element-ui/lib/theme-sgm/index.css"
// 引入封装好的国际化插件 详见/lang/config
import {
    i18n
} from './lang/config'

import MoneyFormat from '@/utils/DateFormat'


//
Vue.use(DateFormat);
Vue.use(ElementUI);

-页面中使用

<el-table-column prop="price">
   <template slot-scope="scope">
        <span>{{ scope.row.date| DateTimeFormat}}</span>
    </template>
</el-table-column>