更新记录

1.0.0（2024-12-06） 下载此版本

无

平台兼容性

Timeline 时间轴组件

一个功能丰富的时间轴组件，支持年份分组、展开/收起、图片预览、链接跳转等功能，并提供多种主题配色方案。

特性

• 📅 支持按年份自动分组
• 🎨 内置多套主题配色
• 📱 完全适配移动端
• 🌗 支持亮色/暗色模式
• 🖼️ 支持图片预览
• 🔗 支持链接跳转
• ⚡ 流畅的动画效果
• 📦 支持内容展开/收起
• 🏷️ 支持标签系统

引入组件

import Timeline from '@/components/timeline/timeline.vue'
export default {
    components: {
        Timeline
    }
}

使用方法

基础用法

<timeline
:timelineData="timelineList"
theme="default"
@load-more="handleLoadMore"
></timeline>

组件参数

Props

Events

数据结构

TimelineItem {
    time: string; // 时间，格式：YYYY-MM-DD
    version: string; // 版本号
    title: string; // 标题
    content: string; // 内容
    highlight: boolean; // 是否高亮显示
    collapsed: boolean; // 是否默认收起
    tags: { // 标签列表
        text: string; // 标签文本
        type: string; // 标签类型：feature/bugfix/optimization/other
        color: string; // 自定义标签颜色
    };
    images: { // 图片列表
        url: string; // 图片地址
    };
    links: { // 链接列表
        text: string; // 链接文本
        url: string; // 链接地址
        type: 'url' | 'page'; // 链接类型：url(外部链接)/page(页面跳转)
    };
}

主题配置

组件内置四种主题配色：

- default: 默认蓝

- green: 清新绿

- purple: 优雅紫

- dark: 暗夜

自定义主题

可以通过传入主题对象来自定义主题：

customTheme = {
    name: '自定义主题',
    primary: '#ff0000',
    dotColor: '#ff0000',
    tagColors: {
    feature: '#52c41a',
    bugfix: '#ff4d4f',
    optimization: '#1890ff',
    other: '#722ed1'
}

注意事项

1. 时间格式必须为 YYYY-MM-DD
2. 图片预览功能需要配置图片地址
3. 链接跳转时需要指定正确的链接类型
4. 自定义主题时建议保持与默认主题结构一致