vue 封装时间格式处理

使用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>