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中渲染數(shù)據(jù)使用dayjs進行日期格式化
使用VUE+Element-ui做的
dayjs是一個流行的JavaScript日期庫，可以方便地解析、操作和格式化日期。
在vue中通過day.js轉(zhuǎn)化時間格式步驟
1.在終端使用npm安裝day.js
npm install dayjs -S
2.在main.js中導入day.js，并創(chuàng)建全局屬性
import dayjs from "dayjs"; app.config.globalProperties.day = dayjs;
dayjs 庫作為一個全局屬性 day 綁定到 Vue 實例的 config 對象上。
通過這種方式，我們可以在 Vue 應用的任意組件中直接調(diào)用 dayjs 庫的方法，而無需每次都引入和初始化該庫。
在 Vue 3.x 中，通過 app.config.globalProperties 創(chuàng)建的全局屬性，只能夠在應用的 setup 函數(shù)或 setup 相關(guān)的鉤子函數(shù)（如 setupProps、setupContext 等）中訪問和使用。
在單文件組件中，也可以通過 defineExpose 函數(shù)將全局屬性暴露給組件的父級。
3.在代碼中設(shè)置插槽
<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.在后續(xù)使用中可直接進行使用
validityDateStart: dayjs(dataForm.validityDate[0]).format(), validityDateEnd: dayjs(dataForm.validityDate[1]).format()
總結(jié)
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了在vue使用echarts報錯:invalid dom問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
這篇文章主要介紹了el-tree樹狀控件如何定位到選中的節(jié)點的位置,本文通過示例代碼給大家介紹的非常詳細,感興趣的朋友跟隨小編一起看看吧2024-08-08
這篇文章主要介紹的是vue 如何實現(xiàn)表單校驗的方法，又代碼詳細解說，感興趣的小伙伴可以參考下面文章的具體內(nèi)容2021-09-09
這篇文章主要介紹了基于Vue中的父子傳值問題解決，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2021-10-10
這篇文章主要介紹了VSCode使用之Vue工程配置eslint，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-04-04
今天小編就為大家分享一篇vue 組件的封裝之基于axios的ajax請求方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08
Vue將將后端返回的list數(shù)據(jù)轉(zhuǎn)化為樹結(jié)構(gòu)的實現(xiàn)
本文主要介紹了Vue將將后端返回的list數(shù)據(jù)轉(zhuǎn)化為樹結(jié)構(gòu)的實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2022-05-05
這篇文章主要介紹了vue前端如何向后端傳遞參數(shù)，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-06-06
這篇文章主要為大家詳細介紹了vuejs父子組件之間的數(shù)據(jù)交互，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-08-08
vue使用docx-preview實現(xiàn)docx文件在線預覽功能全過程
文件在線預覽是目前移動化辦公的一種新趨勢,下面這篇文章主要給大家介紹了關(guān)于vue?docx-preview實現(xiàn)docx文件在線預覽功能的相關(guān)資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2023-04-04