xtf-dateformat

组件说明

xtf-dateformat 是日期格式化组件，用于将时间戳或日期字符串格式化为友好文本。支持自定义格式、相对时间（"刚刚"、"3分钟前"）和自动刷新，适用于消息时间、评论时间和动态时间展示等场景。

---

基础用法

1. 最简示例

通过 date 传入时间戳或日期字符串：

<template>
  <xtf-dateformat :date="Date.now() - 60000" />
</template>

2. 自定义格式

通过 format 设置日期格式：

<template>
  <view style="display: flex; flex-direction: column; gap: 12rpx">
    <xtf-dateformat :date="Date.now()" format="yyyy-MM-dd" />
    <xtf-dateformat :date="Date.now()" format="yyyy/MM/dd HH:mm" />
    <xtf-dateformat :date="Date.now()" format="MM月dd日 hh:mm:ss" />
  </view>
</template>

3. 相对时间阈值

通过 threshold 控制相对时间显示的阈值：

<template>
  <view style="display: flex; flex-direction: column; gap: 12rpx">
    <xtf-dateformat :date="Date.now() - 30000" :threshold="[60000, 3600000]" />
    <xtf-dateformat :date="Date.now() - 1800000" :threshold="[60000, 3600000]" />
    <xtf-dateformat :date="Date.now() - 7200000" :threshold="[60000, 3600000]" />
  </view>
</template>

4. 自动刷新

通过 refreshRate 设置自动刷新间隔（毫秒），适用于实时显示"刚刚"等相对时间：

<template>
  <xtf-dateformat :date="Date.now()" :refresh-rate="1000" />
</template>

---

全部属性

属性	类型	默认值	作用描述	适用范围
date	Object | String | Number	'-'	日期值，支持 Date 对象、时间戳、日期字符串	日期数据
locale	String	''	国际化语言	多语言
threshold	Array	[60000, 3600000]	相对时间阈值 [秒级阈值, 分钟级阈值]	相对时间
format	String	'yyyy/MM/dd hh:mm:ss'	日期格式，支持 yyyy / MM / dd / HH / hh / mm / ss	格式化
refreshRate	Number | String	0	自动刷新间隔（ms），0 不刷新	自动刷新
customClass	String	''	自定义类名	样式覆盖
customStyle	String | Object	''	自定义样式	动态样式覆盖

---

事件

无自定义事件。

---

方法

方法名	参数	返回值	说明
refresh	-	-	手动刷新显示文本

使用示例：

<template>
  <view>
    <xtf-dateformat ref="date" :date="createdAt" /><xtf-button
      label="刷新"
      size="xs"
      @click="refresh"
  /></view>
</template>

<script>
export default {
  data() {
    return { createdAt: Date.now() - 60000 }
  },
  methods: {
    refresh() {
      this.$refs.date.refresh()
      console.log('日期已刷新')
    }
  }
}
</script>

---

主题说明

• 文字颜色默认使用 var(--xtf-color-text-secondary)
• 字体大小默认 28rpx
• 行高默认 1.6

如需全局调整主题，请在 xtf-config-provider 或主题配置中覆盖相关 CSS 变量。