wang-apk

A Vue 3 time formatting plugin that provides global methods and directives for date/time formatting.

Installation

npm install wang-apk

Usage

1. Global Registration

// main.ts
import { createApp } from 'vue'
import App from './App.vue'
import timePlugin from 'wang-apk'

const app = createApp(App)

// Basic usage
app.use(timePlugin)

// With options
app.use(timePlugin, {
  dateFormat: 'YYYY-MM-DD',
  timeFormat: 'HH:mm:ss',
  locale: 'zh-CN'
})

app.mount('#app')

2. Using Global Method

<template>
  <div>
    <!-- Format current time -->
    <p>{{ $formatTime(new Date()) }}</p>

    <!-- Format specific time -->
    <p>{{ $formatTime('2024-03-20 15:30:00') }}</p>

    <!-- Custom format -->
    <p>{{ $formatTime(new Date(), 'YYYY年MM月DD日') }}</p>
  </div>
</template>

<script setup lang="ts">
// No additional setup needed
</script>

3. Using Directive

<template>
  <div>
    <!-- Default format -->
    <p v-format-time></p>

    <!-- Custom format -->
    <p v-format-time="'YYYY/MM/DD HH:mm'"></p>
  </div>
</template>

4. TypeScript Support

Add type declarations to your env.d.ts:

declare module 'vue' {
  interface ComponentCustomProperties {
    $formatTime: (date: Date | string | number, format?: string) => string
  }
}

Format Options

| Format | Description | Example | |--------|-------------|---------| | YYYY | 4-digit year | 2024 | | MM | 2-digit month (01-12) | 03 | | DD | 2-digit day (01-31) | 20 | | HH | 2-digit hour (00-23) | 15 | | mm | 2-digit minute (00-59) | 30 | | ss | 2-digit second (00-59) | 45 |

Default Options

{
  dateFormat: 'YYYY-MM-DD',
  timeFormat: 'HH:mm:ss',
  locale: 'zh-CN'
}

License

ISC