vue 混入 moment

1. 前言

1. momentjs是常用的日期格式化工具
2. 这里简单的封装到 vue 的mixin 混入里面
3. 在实际开发中当然不一定非得要把日期处理通过混入的方式引入到vue,也可以封装工具函数具名导出 使用的时候具名导入
4. npm install moment

---

2. 封装

1. 传入的参数 都是 new Date() 日期格式的 或者时间戳

import moment from "moment"
export const formatDate = {
    methods: {
        // 日期格式化
        // 参数 时间戳
        // 返回格式化后的日期
        // 年-月-日
        shortTime(value, formater = "YYYY-MM-DD") {
            return moment(value).format(formater);
        },
        // 年-月-日 时:分:秒
        fullDateTime(value, formater = "YYYY-MM-DD HH:mm:ss") {
            return moment(value).format(formater);
        },
        // 年/月/日 时:分:秒
        fullDateTime1(value, formater = "YYYY/MM/DD HH:mm:ss") {
            return moment(value).format(formater);
        },
        // 年/月/日 时:分
        leaveTime(value) {
            return moment(value).format("YYYY-MM-DD HH:mm");
        },
        // 年-月
        monthTime(value) {
            return moment(value).format("YYYY-MM");
        },
        // 年/月
        monthTime1(value) {
            return moment(value).format("YYYY/MM");
        },

        // 年-月-日
        monthTime2(value) {
            return moment(value).format("YYYY-MM-DD");
        },

        // 每月第一天
        monthOne(value) {
            return moment(value).format("YYYY-MM-01");
        },
        // 每月第一天精确
        monthOnes(value) {
            return moment(value).format("YYYY-MM-01 00:00:00");
        },
        // 补全00:00:00
        addZero(value) {
            return moment(value).format("YYYY-MM-DD 00:00:00");
        },
        // 月数
        MonTime(value) {
            return moment(value).format("MM");
        },
        // 天数
        dayTime(value) {
            return moment(value).format("DD");
        },
        // 时:分:秒
        secondsTime(value) {
            return moment(value).format("HH:mm:ss");
        },
        // 时:分
        secondShortTime(value) {
            return moment(value).format("HH:mm");
        },

    }
}

---

3. 全局混入

1. 全局都能用
   import {formatDate} from '@/mixin/formatDate'

createApp(App).mixin(formatDate).use(router).mount('#app')

4. 局部混入也一样

import {formatDate} from '@/mixin/formatDate'
export default {
    data() {
        return {
        }
    },
    created() {
      
    },
    //把 混入文件的代码 同属性合并到当前组件对应属性
    mixins:[formatDate],
    methods: {  },
}

---

5. 页面使用都一样

1. 直接使用 想要哪种日期格式的函数名就可以了

  
   {{  shortTime(   new Date()  ) }} 

显示 2022-10-08

---

参考资料

momentjs是常用的日期格式化工具

---

初心

我所有的文章都只是基于入门，初步的了解；是自己的知识体系梳理;如有错误,欢迎交流;

如果能帮助到有缘人,非常的荣幸,一切为了部落的崛起;

共勉