1.效果图
2.
当使用
timeline-slider-vue
组件时,你可以设置以下属性:
date
:用于设置时间轴滑块的初始日期,格式通常为 YYYY-MM-DD。
mask
:一个布尔值,用于控制是否显示背景遮罩。
markDate
:一个数组,用于标记特定日期,在时间轴上会有相应的标记显示。
lockDate
:一个数组,用于锁定日期,当滑动结束时自动跳到指定的日期。
3.js部分
环境
node V12.20.0
npm 6.14.8
📦 Install
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)
🔧 Usage
<TimelineSliderVue>
<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"
@change="handleChange"
@input="handleInput"
>
<div slot="sliderContent" slot-scope="scope">
{{ scope.data }}
</div>
</TimelineSliderVue>
</div>
</template>
<script>
export default {
data() {
return {
lockDate: [], // 锁定的日期(滑动结束时自动跳到指定的日期)
markDate: [], // 做标记的日期
mask: true,
date: '2022-06-01',
}
},
methods: {
handleInput(value, date) {
console.log('........input', value, date)
},
handleChange(value, date) {
console.log('........change', value, date)
},
},
}
</script>