我要评论带拖动和播放功能的时间轴
timeline-slider-vue
环境
- node v12.20.0
- npm 6.14.8
install
npm install --save timeline-slider-vue
usage
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>
available 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 | 数据改变时触发（使用鼠标拖拽时，活动过程实时触发） | 改变后的值 |
project setup
yarn install
compiles and hot-reloads for development
yarn serve
compiles and minifies for production
yarn build
lints and fixes files
yarn lint
到此这篇关于使用vue实现带拖动和播放功能的时间轴的文章就介绍到这了,更多相关vue时间轴内容请搜索代码网以前的文章或继续浏览下面的相关文章希望大家以后多多支持代码网！
发表评论