@dinert/time-player NPM

自适应时间轴播放器

前言

这是一个从0到1实现的时间轴播放器，除了时间格式化用了第三库dayjs以外，其它的都是使用纯源生的js实现的，兼容性IE8吧，这里小小的夸一下
轻量级时间轴组件，包的大小在30kb左右
从刚开始的琢磨不透，到最后的云淡风轻，可算把这个时间轴播放器给完成了

效果

技术栈

│  .babelrc
│  .gitignore
│  index.html
│  package.json
│  README.md
│  rollup.config.build.js
│  rollup.config.dev.js  
│  yarn.lock
│
├─packages
│  └─DTimePlayer
│      │  index.js       
│      │
│      └─src
│              indes.scss
│              index.vue
│
└─src
        index.js

安装

如果你使用npm

npm i @dienrt/time-player --save

或者使用yarn

yarn add @dinert/time-player

使用

  import DTimePlayer from '@dinert/time-player'
  <d-time-player></d-time-player>
  export default {
    components: {
      DTimePlayer
    }
  }

属性

参数	说明	类型	可选值	默认值
startTime	开始时间	Date	一	当前时间的前两天
endTime	结束时间	Date	一	当前时间的后两天
currentTime	当前时间	Date	一	new Date()
stopTime	时间轴停止的时间	Date	一	new Date()
formatFooter	底部时间格式化	String	一	YYYY年MM月DD日
formatTooltip	tooltip时间格式化	String	一	YYYY年MM月DD日 HH时
interval	24小时时间的间隔	Number	一	3
delay	播放时间的间隔	Number	一	2000