更新记录

0.0.4（2025-08-31） 下载此版本

• chore: 更新文档

0.0.3（2025-04-25） 下载此版本

• chore: 更新文档

0.0.2（2025-04-25） 下载此版本

• feat: 兼容uniappx 鸿蒙next

平台兼容性

uni-app(4.74)

uni-app x(4.75)

其他

lime-dateformat 日期格式化组件

一个功能丰富的日期格式化组件，用于将日期转换为多种格式。支持将日期格式化为标准格式或相对时间（如"刚刚"、"几分钟前"等），可用于文章发布时间、评论时间、消息时间等多种场景。组件提供了丰富的自定义选项，可以满足各种日期展示需求。

插件依赖：lime-shared、lime-style

文档链接

📚 组件详细文档请访问以下站点：

• 日期格式化组件文档 - 站点1
• 日期格式化组件文档 - 站点2
• 日期格式化组件文档 - 站点3

安装方法

1. 在uni-app插件市场中搜索并导入lime-dateformat
2. 导入后可能需要重新编译项目
3. 在页面中使用l-dateformat组件

代码演示

基础用法

最简单的日期格式化组件用法，传入日期字符串或时间戳。

<l-dateformat date="2024/11/14 05:00"/>
<l-dateformat date="1731531854460"/>

自定义格式

通过format属性设置日期的显示格式。

<l-dateformat date="2024/11/14 05:00" format="yyyy年MM月dd日 hh:mm:ss"/>
<l-dateformat date="2024/11/14 05:00" format="MM/dd hh:mm"/>
<l-dateformat date="2024/11/14 05:00" format="yyyy-MM-dd"/>

相对时间显示

通过threshold属性设置相对时间的转换阈值。

<!-- 显示为"xx分钟前"或"xx小时前" -->
<l-dateformat date="2024/11/14 05:00" :threshold="[60000, 3600000]"/>

不同语言

通过locale属性设置显示语言。

<!-- 中文显示 -->
<l-dateformat date="2024/11/14 05:00" locale="zh"/>

<!-- 英文显示 -->
<l-dateformat date="2024/11/14 05:00" locale="en"/>

自动刷新

通过refreshRate属性设置自动刷新的时间间隔（毫秒）。

<!-- 每分钟刷新一次 -->
<l-dateformat date="2024/11/14 05:00" :refreshRate="60000"/>

快速预览

导入插件后，可以直接使用以下标签查看演示效果：

<!-- 代码位于 uni_modules/lime-dateformat/components/lime-dateformat -->
<lime-dateformat />

插件标签说明

Vue2使用说明

main.js中添加以下代码：

// vue2项目中使用
import Vue from 'vue'
import VueCompositionAPI from '@vue/composition-api'
Vue.use(VueCompositionAPI)

详细配置请参考官方文档：Vue Composition API

API文档

Props 属性说明

格式字符说明

threshold 阈值说明

以[60000, 3600000]为例，将传入时间与当前时间差的绝对值记为delta（单位毫秒）：

• 当delta < 60000时，时间会被转化为“刚刚|马上”
• 当delta >= 60000 && delta < 3600000时，时间会被转化为“xx分钟前|xx分钟后”，如果超过1小时会显示成“xx小时前|xx小时后”，以此类推
• 当delta >= 3600000时，会按照format参数传入的格式进行格式化

如果不想转化为“马上|刚刚”可以传入:threshold = "[0,3600000]"。默认值[0,0]既不会转换为“马上|刚刚”也不会转化为“xx分钟前|xx分钟后”

主题定制

组件提供了以下CSS变量，可用于自定义样式：

支持与赞赏

如果你觉得本插件解决了你的问题，可以考虑支持作者：

支付宝赞助	微信赞助