vue3中如何使用dayjs

 更新时间:2024年03月18日 09:08:31   作者:小阳生煎  
这篇文章主要介绍了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实现自定义弹窗组件的全屏功能

    Vue3+Element Plus实现自定义弹窗组件的全屏功能

    在现代化的前端开发中,弹窗组件是提升用户体验的重要元素,本文将介绍如何使用 Vue 3 和 Element Plus 库来创建一个具有全屏功能的自定义弹窗组件,文中通过代码示例讲解的非常详细,需要的朋友可以参考下
    2024-07-07
  • Vue+OpenLayer为地图添加风场效果

    Vue+OpenLayer为地图添加风场效果

    这篇文章主要为大家展示了一个demo,即利用Vue和OpenLayer在地图上面添加风场效果,文中的示例代码讲解详细,感兴趣的小伙伴可以了解一下
    2022-04-04
  • vite项目添加eslint prettier及husky方法实例

    vite项目添加eslint prettier及husky方法实例

    这篇文章主要为大家介绍了vite项目添加eslint prettier及实例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-07-07
  • Vue+node实现音频录制播放功能

    Vue+node实现音频录制播放功能

    这篇文章主要介绍了Vue+node实现音频录制播放,功能,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2021-03-03
  • vue踩坑记录:属性报undefined错误问题

    vue踩坑记录:属性报undefined错误问题

    这篇文章主要介绍了vue踩坑记录:属性报undefined错误问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-04-04
  • Vue.JS入门教程之列表渲染

    Vue.JS入门教程之列表渲染

    这篇文章主要为大家详细介绍了Vue.JS入门教程之列表渲染,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-12-12
  • Vue 子组件更新props中的属性值问题

    Vue 子组件更新props中的属性值问题

    这篇文章主要介绍了Vue 子组件更新props中的属性值问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-10-10
  • Vue数据与事件绑定以及Class和Style的绑定详细讲解

    Vue数据与事件绑定以及Class和Style的绑定详细讲解

    这篇文章主要介绍了Vue数据与事件绑定以及Class和Style的绑定,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习吧
    2023-01-01
  • vue设置路由title,但刷新页面时title失效的解决

    vue设置路由title,但刷新页面时title失效的解决

    这篇文章主要介绍了vue设置路由title,但刷新页面时title失效的解决方案,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-06-06
  • vue.js全局组件和局部组件示例代码

    vue.js全局组件和局部组件示例代码

    组件是Vue.js的最核心的功能,所谓的组件化就是把页面拆分成多个组件,每个组件单独使用CSS,JS,模板,图片等资源进行开发与维护,然后在制作网页的时候根据需要调用相关的组件,这篇文章主要给大家介绍了关于vue.js全局组件和局部组件的相关资料,需要的朋友可以参考下
    2022-12-12

最新评论