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()

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • Vue 日期获取的示例代码

    Vue 日期获取的示例代码

    moment.js是一款现在对时间处理的强大的函数,这篇文章主要介绍了Vue 日期获取的示例代码,代码简单易懂,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2023-01-01
  • 整理项目中vue.config.js打包优化配置方法

    整理项目中vue.config.js打包优化配置方法

    这篇文章主要介绍了整理项目中vue.config.js打包优化,包括配置 webpack-bundle-analyzer 插件查看文件大小及配置compression-webpack-plugin 用gzip压缩打包的文件大小,本文结合实例代码介绍的非常详细,需要的朋友可以参考下
    2023-02-02
  • vue router嵌套路由在history模式下刷新无法渲染页面问题的解决方法

    vue router嵌套路由在history模式下刷新无法渲染页面问题的解决方法

    这篇文章主要介绍了vue router嵌套路由在history模式下刷新无法渲染页面问题的解决方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2018-01-01
  • 使用 vue.js 构建大型单页应用

    使用 vue.js 构建大型单页应用

    本文给大家详细介绍了如何使用使用 vue.js脚手架工具vue-cli构建大型单页应用的方法,非常的实用,有需要的小伙伴可以参考下
    2018-02-02
  • el-form-renderer使用教程

    el-form-renderer使用教程

    本文主要介绍了el-form-renderer使用教程,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2023-05-05
  • 使用@tap.stop阻止事件继续传播

    使用@tap.stop阻止事件继续传播

    这篇文章主要介绍了使用@tap.stop阻止事件继续传播,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-03-03
  • 浅析Vue中自定义指令的用法

    浅析Vue中自定义指令的用法

    在Vue中,有两种类型的自定义指令:局部指令和全局指令,但是除了这些指令 Vue也允许我们自己定义自己的指令,下面我们就来学习一下Vue中自定义指令的用法吧
    2023-08-08
  • Vue路由 重定向和别名的区别说明

    Vue路由 重定向和别名的区别说明

    这篇文章主要介绍了Vue路由 重定向和别名的区别说明,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-09-09
  • Vue Router4中params传参失效和报错问题的解决方法

    Vue Router4中params传参失效和报错问题的解决方法

    在使用vue-router4中params 进行路由组件之间传参,跳转页面接收不了并报错,本文给大家介绍了Vue Router4中params传参失效和报错问题的解决方法,需要的朋友可以参考下
    2024-03-03
  • vue 实现tab切换保持数据状态

    vue 实现tab切换保持数据状态

    这篇文章主要介绍了vue 实现tab切换保持数据状态,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-07-07

最新评论