pretty-timeline

这是一个vue3版本的时间轴组件, 可配置性高、使用丝滑

因为想使用时间轴组件，苦于没有找到现有的vue3版本，所以自己动手实现一下

安装(Install)

# Install with pnpm
$ pnpm i pretty-timeline -S
# or npm
$ npm i pretty-timeline -S

预览(Preview)

• On Light Mode

• On Dark Mode

使用(Use)

1. 导入(Import)

• 使用局部导入:

// 在.vue文件中
import { PrettyTimeline } from 'pretty-timeline'
import 'pretty-timeline/dist/style.css'

• 使用全局导入

// 在main.ts中
import PrettyTimeline from 'pretty-timeline'
import 'pretty-timeline/dist/style.css'

// 注册为全局组件使用
app.use(PrettyTimeline)
// or
app.component('PrettyTimeline', PrettyTimeline)

2. 使用示例(Example）

import image from '/imgs/street.jpeg'
import type { ITimeline } from '~/types'

const timelineArr = ref<ITimeline[]>([
  {
    isCollapsed: false,
    year: '2022年',
    title: '光阴长河',
    list: [
      {
        date: '12月3日',
        iconColor: 'green',
        chipColor: '#26C1C9',
        chipText: 'gxr chips',
        subTitleColor: '#ec6a13',
        subTitle: '新的一年开始了',
        imgUrl: image,
        content: `
        春日忆李白<br/>
        白也诗无敌，飘然思不群。<br/>
        清新庾开府，俊逸鲍参军。<br/>
        渭北春天树，江东日暮云。<br/>
        何时一尊酒，重与细论文。
        <br/>
        <a text="orange" border-b="1 dashed orange" href="https://github.com/guxuerui" target="_blank">我的Github</a>
        `,
      },
      {
        date: '12月2日',
        iconColor: '#fa1',
        chipColor: '#26C',
        chipText: '此时此刻, 恰如彼时彼刻',
        subTitleColor: '#ec6a13',
        subTitle: '进入12月了',
        imgUrl: '',
        content: `
        菊<br/>
        罗隐〔唐代〕<br/>
        篱落岁云暮，数枝聊自芳。<br/>
        雪裁纤蕊密，金拆小苞香。<br/>
        千载白衣酒，一生青女霜。<br/>
        春丛莫轻薄，彼此有行藏。
        <br/>
        <a text="blue" border-b="1 dashed blue" href="https://github.com/guxuerui" target="_blank">我的Github</a>
        `,
      },
    ],
  },
  {
    isCollapsed: false,
    year: '2021年',
    title: '',
    list: [
      {
        date: '12月2日',
        chipText: '你好吗',
        subTitle: '去年今日',
        imgUrl: image,
        content: `
        秦淮杂诗·其八<br/>
        王士祯〔清代〕<br/>
        新歌细字写冰纨，小部君王带笑看。<br/>
        千载秦淮呜咽水，不应仍恨孔都官。
        `,
      },
    ],
  },
])

<pretty-timeline base-color="#09afaf" :timeline-data="timelineArr" />

3. 兼容性

支持最新版本的 Chrome/Firefox/Safari

4. 类型定义和属性(Props)

• 类型定义(Type Declarations)

export interface IList {
  date: string
  iconColor: string
  iconRight?: string
  iconTop?: string
  chipColor?: string
  chipText?: string
  subTitleColor: string
  subTitle: string
  imgUrl?: string
  content: string
}

export interface ITimeline {
  isCollapsed: boolean
  year: string
  title: string
  list: IList[]
}

interface IPrettyTimeline {
  baseColor?: string
  timelineData: ITimeline[]
}

• 属性(Props)

|名称|描述|类型|默认|是否必须| |---|---|---|---|---| |baseColor|基础颜色, 应用于年份/title/线的颜色|string|'#58a6fb'|false| |isCollapsed|是否收起|boolean|false|true| |year|年份时间|string|''|true| |title|标题|string|''|true| |date|月份时间|string|''|true| |iconColor|圆环颜色|string|'#ec6a4f'|false| |iconRight|圆环定位右偏移量|string|'8%'|false| |iconTop|圆环定位上偏移量|string|'0%'|false| |chipColor|chip颜色|string|'#26c1c9'|false| |chipText|chip文本|string|''|false| |subTitleColor|小标题颜色|string|'#ec6a13'|false| |subTitle|小标题|string|''|true| |imgUrl|图片链接|string|''|false| |content|正文内容|string|''|true|

类型报错

如果引入组件后报类型错误，可以在 shims.d.ts(或其它 .d.ts 文件)中加入:

declare module 'pretty-timeline'

License

MIT license