首页 > 网络编程 > JavaScript > javascript类库 > vue.js > vue3使用dayjs

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

总结

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