介绍
本文档主要用于描述 ShadcnTime 组件的特性和用法。本组件是基于 Day.js 的封装,支持格式化、时区、相对时间和参考时间等功能。
用法
查看代码
vue
<template>
<ShadcnTime :dark="darkMode" />
</template>格式化 (format)
查看代码
vue
<template>
<ShadcnTime format="YYYY-MM-DD" :dark="darkMode" />
</template>时区 (timezone)
查看代码
vue
<template>
<ShadcnTime timezone="America/New_York" :dark="darkMode" />
</template>相对时间 (relative)
查看代码
vue
<template>
<ShadcnTime relative :dark="darkMode" />
</template>参考时间 (referenceTime)
查看代码
vue
<template>
<ShadcnTime relative :reference-time="tenMinutesAgo" :dark="darkMode" />
<ShadcnTime relative :reference-time="oneHourLater" :dark="darkMode" />
</template>
<script setup lang="ts">
import { useData } from 'vitepress'
import { computed } from 'vue'
const { isDark } = useData()
const darkMode = computed(() => isDark.value)
import { computed } from 'vue'
const tenMinutesAgo = computed(() => {
const date = new Date()
date.setMinutes(date.getMinutes() - 10)
return date
})
const oneHourLater = computed(() => {
const date = new Date()
date.setHours(date.getHours() + 1)
return date
})
</script>更新间隔 (interval)
查看代码
vue
<template>
<p class="text-sm text-gray-500 mb-1">自定义更新间隔 (5秒):
<ShadcnTime relative :interval="5000" @on-change="handleIntervalChange" :dark="darkMode" />
<div v-if="lastIntervalChange">
上次更新: {{ lastIntervalChange }}
</div>
</p>
</template>
<script setup lang="ts">
import { useData } from 'vitepress'
import { computed } from 'vue'
const { isDark } = useData()
const darkMode = computed(() => isDark.value)
import { ref } from 'vue'
const lastIntervalChange = ref('')
const handleIntervalChange = (time: Date) => {
lastIntervalChange.value = new Date(time).toLocaleTimeString()
}
</script>