vue3中如何使用dayjs
vue3使用dayjs
全局使用
cnpm i dayjs --save
// main.ts import dayjs from 'dayjs' const app = createApp(App); app.use(store).use(router).use(ElementPlus).mount('#app') app.config.globalProperties.day=dayjs//全局挂载
//使用的页面 //引用getCurrentInstance import { reactive,toRefs,getCurrentInstance} from 'vue' setup() { const { proxy } = getCurrentInstance() as any; const day =proxy.day const data= reactive({ }) const refData = toRefs(data); return { ...refData, day } }
<template> <div> {{day('20170113').format("YYYY-MM-DD HH:mm:ss")}} </div> </template>
局部使用
import dayjs from 'dayjs' //然后return出去 return { day }
<template> <div> {{day('20170113').format("YYYY-MM-DD HH:mm:ss")}} </div> </template>
vue中渲染数据使用dayjs进行日期格式化
使用VUE+Element-ui做的
dayjs是一个流行的JavaScript日期库,可以方便地解析、操作和格式化日期。
在vue中通过day.js转化时间格式步骤
1.在终端使用npm安装day.js
npm install dayjs -S
2.在main.js中导入day.js,并创建全局属性
import dayjs from "dayjs"; app.config.globalProperties.day = dayjs;
dayjs 库作为一个全局属性 day 绑定到 Vue 实例的 config 对象上。
通过这种方式,我们可以在 Vue 应用的任意组件中直接调用 dayjs 库的方法,而无需每次都引入和初始化该库。
在 Vue 3.x 中,通过 app.config.globalProperties 创建的全局属性,只能够在应用的 setup 函数或 setup 相关的钩子函数(如 setupProps、setupContext 等)中访问和使用。
在单文件组件中,也可以通过 defineExpose 函数将全局属性暴露给组件的父级。
3.在代码中设置插槽
<el-table-column prop="validityDateEnd" :label="$t('user.validityDateEnd')" sortable="custom" header-align="center" align="center"> <template v-slot="scope"> {{ dayjs(scope.row.validityDateEnd).format("YYYY-MM-DD") }} </template> </el-table-column>
4.在后续使用中可直接进行使用
validityDateStart: dayjs(dataForm.validityDate[0]).format(), validityDateEnd: dayjs(dataForm.validityDate[1]).format()
总结
以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。
相关文章
vue router嵌套路由在history模式下刷新无法渲染页面问题的解决方法
这篇文章主要介绍了vue router嵌套路由在history模式下刷新无法渲染页面问题的解决方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下2018-01-01Vue Router4中params传参失效和报错问题的解决方法
在使用vue-router4中params 进行路由组件之间传参,跳转页面接收不了并报错,本文给大家介绍了Vue Router4中params传参失效和报错问题的解决方法,需要的朋友可以参考下2024-03-03
最新评论