1. 前言
- momentjs是常用的日期格式化工具
- 这里简单的封装到 vue 的
mixin混入里面- 在实际开发中当然不一定非得要把日期处理通过
混入的方式引入到vue,也可以封装工具函数具名导出 使用的时候具名导入- npm install moment
2. 封装
- 传入的参数 都是 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. 全局混入
- 全局都能用
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. 页面使用都一样
- 直接使用 想要哪种日期格式的函数名就可以了
<p> {{ shortTime( new Date() ) }} </p>
显示
2022-10-08
参考资料
momentjs是常用的日期格式化工具
