vue2-timeline

一个基于 Vue2 的时间轴组件，可以横向展示年份，支持自动播放和年份选择功能。

功能特点

• 横向显示年份时间轴
• 支持自动播放/暂停功能
• 两侧提供切换按钮
• 可以直接在轴上点击年份进行切换
• 自定义颜色、年份范围和播放间隔
• 提供年份变化的事件回调

安装

npm install vue2-timeline --save

基本使用

在 Vue 组件中导入并使用：

import Vue2Timeline from 'vue2-timeline';

export default {
  components: {
    Vue2Timeline
  },
  methods: {
    handleYearChange(year) {
      console.log('当前年份: ', year);
    }
  }
}

在模板中使用：

<vue2-timeline 
  :start-year="2012" 
  :end-year="2022"
  :interval="2000"
  primary-color="#2196F3"
  @change="handleYearChange">
</vue2-timeline>

API

Props

属性	类型	默认值	描述
startYear	Number	2000	开始年份
endYear	Number	当前年份	结束年份
interval	Number	2000	自动播放时的间隔时间(毫秒)
primaryColor	String	'#2196F3'	主题色
initialYear	Number	startYear	初始选中的年份

事件

事件名	回调参数	描述
change	year: Number	选中年份变化时触发
play-status-changed	isPlaying: Boolean	播放状态变化时触发

浏览器兼容性

• 支持所有现代浏览器
• 支持 IE11 及以上版本（需要相应 polyfill）

示例

请查看 example.html 文件获取更多使用示例。

许可证

ISC