使用Vue實(shí)現(xiàn)帶拖動(dòng)和播放功能的時(shí)間軸

更新時(shí)間：2024年03月25日 09:50:36 作者：liuzhenghe30265

這篇文章主要為大家詳細(xì)介紹了如何使用Vue實(shí)現(xiàn)帶拖動(dòng)和播放功能的時(shí)間軸,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下

帶拖動(dòng)和播放功能的時(shí)間軸

timeline-slider-vue

Demo

Github

環(huán)境

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, // 自動(dòng)播放
			lockFlag: false,
			markFlag: false,
			lockDate: [], // 鎖定的日期（滑動(dòng)結(jié)束時(shí)自動(dòng)跳到指定的日期）
			markDate: [], // 做標(biāo)記的日期
			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

參數(shù)	類(lèi)型	默認(rèn)值	說(shuō)明
vertical	Boolean	false	豎向模式（只有滑塊功能樣式，沒(méi)有日期等功能）
initValue	Number	0	v-model 綁定的初始值（僅在 vertical = true 時(shí)生效）
minValue	Number	0	最小值（僅在 vertical = true 時(shí)生效）
maxValue	Number	100	最大值（僅在 vertical = true 時(shí)生效）
date	String	當(dāng)日	yyyy-MM-dd 格式的日期，根據(jù)傳入的日期，設(shè)置滑塊的位置
mask	Boolean	true	拖動(dòng)過(guò)程中是否顯示遮罩層
mark-date	Array	[]	一些特殊日期標(biāo)注，例如 [‘2022-03-08’, ‘2022-06-18’, ‘2022-11-11’]
lock-date	Array	[]	鎖定的日期，只能在指定日期下切換，當(dāng)滑塊拖動(dòng)到其他位置，自動(dòng)跳到離指定日期最近的日期處例如 [‘2022-03-08’, ‘2022-06-18’, ‘2022-11-11’]
play	Boolean	false	播放
playSpeed	Number	1000	播放速度，同 setInterval milliseconds 參數(shù)

slot

參數(shù)	說(shuō)明
sliderContent	滑塊內(nèi)容

Events

事件名稱(chēng)	說(shuō)明	回調(diào)參數(shù)
change	值改變時(shí)觸發(fā)（使用鼠標(biāo)拖拽時(shí)，只在松開(kāi)鼠標(biāo)后觸發(fā)）	改變后的值
input	數(shù)據(jù)改變時(shí)觸發(fā)（使用鼠標(biāo)拖拽時(shí)，活動(dòng)過(guò)程實(shí)時(shí)觸發(fā)）	改變后的值