使用Vue實現(xiàn)帶拖動和播放功能的時間軸
帶拖動和播放功能的時間軸
timeline-slider-vue
環(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, // 自動播放 lockFlag: false, markFlag: false, lockDate: [], // 鎖定的日期(滑動結(jié)束時自動跳到指定的日期) 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
參數(shù) | 類型 | 默認值 | 說明 |
---|---|---|---|
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 格式的日期,根據(jù)傳入的日期,設置滑塊的位置 |
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 參數(shù) |
slot
參數(shù) | 說明 |
---|---|
sliderContent | 滑塊內(nèi)容 |
Events
事件名稱 | 說明 | 回調(diào)參數(shù) |
---|---|---|
change | 值改變時觸發(fā)(使用鼠標拖拽時,只在松開鼠標后觸發(fā)) | 改變后的值 |
input | 數(shù)據(jù)改變時觸發(fā)(使用鼠標拖拽時,活動過程實時觸發(fā)) | 改變后的值 |
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
到此這篇關(guān)于使用Vue實現(xiàn)帶拖動和播放功能的時間軸的文章就介紹到這了,更多相關(guān)Vue時間軸內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
Vue使用distpicker插件實現(xiàn)省市級下拉框三級聯(lián)動
這篇文章主要介紹了Vue使用distpicker插件實現(xiàn)省市級下拉框三級聯(lián)動,比如通過JSON文件生成對應的區(qū)域下拉框,element-china-are插件,包括distpicker插件,通過代碼講解如何使用distpicker插件實現(xiàn)省市級三聯(lián)跳動,需要的朋友可以參考下2023-02-02vue項目在webpack2實現(xiàn)移動端字體自適配功能
這篇文章主要介紹了vue項目在webpack2實現(xiàn)移動端字體自適配的相關(guān)知識,本文通過圖文并茂的形式給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-06-06Vue實現(xiàn)boradcast和dispatch的示例
這篇文章主要介紹了Vue實現(xiàn)boradcast和dispatch的示例,幫助大家更好的理解和使用vue,感興趣的朋友可以了解下2020-11-11淺析vue-router jquery和params傳參(接收參數(shù))$router $route的區(qū)別
今天做項目時踩到了vue-router傳參的坑(jquery和params),所以決定總結(jié)一下二者的區(qū)別。感興趣的朋友跟隨腳本之家小編一起看看吧2018-08-08