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

