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()
总结
以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。
相关文章
Vue3+Element Plus实现自定义弹窗组件的全屏功能
在现代化的前端开发中,弹窗组件是提升用户体验的重要元素,本文将介绍如何使用 Vue 3 和 Element Plus 库来创建一个具有全屏功能的自定义弹窗组件,文中通过代码示例讲解的非常详细,需要的朋友可以参考下2024-07-07
vite项目添加eslint prettier及husky方法实例
这篇文章主要为大家介绍了vite项目添加eslint prettier及实例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪2022-07-07
Vue数据与事件绑定以及Class和Style的绑定详细讲解
这篇文章主要介绍了Vue数据与事件绑定以及Class和Style的绑定,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习吧2023-01-01


最新评论