本文介绍基于Vue开发的timeline-slider-vue组件，支持横向与竖向模式。该组件提供拖动交互、日期标记、锁定日期及自动播放功能，详细列出Props参数、Slot插槽及Change/Input事件用法，并附带Node环境配置与项目构建命令。
实现一个具备拖动交互与自动播放功能的时间轴组件
该组件库名为 timeline-slider-vue
可通过在线 Demo 查看实际运行效果
完整源代码托管于 Github 仓库
运行该组件需满足以下环境要求
- Node.js 版本需为 V12.20.0
- npm 包管理器版本需为 6.14.8
安装步骤如下
执行命令 npm install --save timeline-slider-vue 进行安装
组件使用方式说明
在 main.js 中进行全局注册或局部引入
import TimelineSliderVue from 'timeline-slider-vue'
import 'timeline-slider-vue/lib/timeline-slider-vue.css'
Vue.use(TimelineSliderVue)
```vue
<TimelineSliderVue
:date="date"
:mask="mask"
:mark-date="markDate"
:lock-date="lockDate"
:play="play"
:play-speed="playSpeed"
@change="handleChange"
@input="handleInput">
<div
slot="sliderContent"
slot-scope="scope">
{{ scope.data }}
</div>
</TimelineSliderVue>
具体使用示例如下
<template>
<div id="app">
<TimelineSliderVue
:date="date"
:mask="mask"
:mark-date="markDate"
:lock-date="lockDate"
:play="play"
:play-speed="playSpeed"
@change="handleChange"
@input="handleInput"
>
<div slot="sliderContent" slot-scope="scope">
{{ scope.data }}
</div>
</TimelineSliderVue>
</div>
</template>
<script>
export default {
data() {
return {
playSpeed: 1000, // 播放速度
play: false, // 自动播放
lockFlag: false,
markFlag: false,
lockDate: [], // 锁定的日期（滑动结束时自动跳到指定的日期）
markDate: [], // 做标记的日期
mask: true,
date: '2022-06-01',
}
},
methods: {
handleInput(date, value) {
console.log('input', date, value)
},
handleChange(date, value) {
console.log('change', date, value)
},
},
}
</script>
支持竖向模式布局
<TimelineSliderVue
vertical
height="240px"
:max-value="100"
:min-value="0"
:init-value="40"
@change="handleChange"
@input="handleInput"
>
<div slot="sliderContent" slot-scope="scope">
<div>{{ scope.value }}</div>
</div>
</TimelineSliderVue>
组件支持的可用 Props 参数列表
| 参数 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| vertical | Boolean | false | 竖向模式（只有滑块功能样式，没有日期等功能） |
| initValue | Number | 0 | v-model 绑定的初始值（仅在 vertical = true 时生效） |
| minValue | Number | 0 | 最小值（仅在 vertical = true 时生效） |
| maxValue | Number | 100 | 最大值（仅在 vertical = true 时生效） |
| date | String | 当日 | yyyy-MM-dd 格式的日期，根据传入的日期，设置滑块的位置 |
| mask | Boolean | true | 拖动过程中是否显示遮罩层 |
| mark-date | Array | [] | 一些特殊日期标注，例如 [‘2022-03-08’, ‘2022-06-18’, ‘2022-11-11’] |
| lock-date | Array | [] | 锁定的日期，只能在指定日期下切换，当滑块拖动到其他位置，自动跳到离指定日期最近的日期处例如 [‘2022-03-08’, ‘2022-06-18’, ‘2022-11-11’] |
| play | Boolean | false | 播放 |
| playSpeed | Number | 1000 | 播放速度，同 setInterval milliseconds 参数 |
组件提供的 Slot 插槽定义
| 参数 | 说明 |
|---|---|
| sliderContent | 滑块内容 |
组件触发的 Events 事件列表
| 事件名称 | 说明 | 回调参数 |
|---|---|---|
| change | 值改变时触发（使用鼠标拖拽时，只在松开鼠标后触发） | 改变后的值 |
| input | 数据改变时触发（使用鼠标拖拽时，活动过程实时触发） | 改变后的值 |
项目开发环境搭建与启动命令
执行 yarn install 安装项目依赖
执行 yarn serve 进行开发环境编译并启用热重载
执行 yarn build 进行生产环境编译并压缩代码
执行 yarn lint 对代码进行语法检查与修复
yarn build
Lints and fixes files
yarn lint
至此，关于利用 Vue 实现具备拖动与播放功能的时间轴组件介绍完毕，更多 Vue 时间轴相关内容可查阅往期文章或继续浏览后续章节，感谢支持。