前端 日期格式化插件 dayjs

最近寫項目用到了時間格式化，想自己封裝一個，發現自己沒有那個能力，這就尴尬了，還好有萬能的網友大神們，找到了data-format這個插件，用起來還是很絲滑的，上效果

下面來說說使用步驟：

1 安裝

npm install dayjs 
或
yarn add dayjs
           

2 封裝

data-format.ts
import dayjs from 'dayjs'
import utc from 'dayjs/plugin/utc'


dayjs.extend(utc)

const DATE_TIME_FORMAT = 'YYYY-MM-DD HH:mm:ss'
export function formatUtsString(
  utcString: string,
  format: string = DATE_TIME_FORMAT
) {
  return dayjs.utc(utcString).format(format)
}

register-properties.ts
import { App } from 'vue'
import { formatUtsString } from '@/utils/data-format'
export default function regeisterProperties(app: App) {
  app.config.globalProperties.$filters = {
    formatTime(value: string) {
      return formatUtsString(value)
    }
  }
}
           

3 注冊

import regeisterProperties from './register-properties' 
 app.use(regeisterProperties)
           

可在main.ts裡全局注冊

4 使用

$filters.formatTime(需格式化的時間)