亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

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

 更新時間:2024年03月25日 09:50:36   作者:liuzhenghe30265  
這篇文章主要為大家詳細介紹了如何使用Vue實現(xiàn)帶拖動和播放功能的時間軸,文中的示例代碼講解詳細,感興趣的小伙伴可以跟隨小編一起學習一下

帶拖動和播放功能的時間軸

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, // 自動播放
			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ù)類型默認值說明
verticalBooleanfalse豎向模式(只有滑塊功能樣式,沒有日期等功能)
initValueNumber0v-model 綁定的初始值(僅在 vertical = true 時生效)
minValueNumber0最小值(僅在 vertical = true 時生效)
maxValueNumber100最大值(僅在 vertical = true 時生效)
dateString當日yyyy-MM-dd 格式的日期,根據(jù)傳入的日期,設置滑塊的位置
maskBooleantrue拖動過程中是否顯示遮罩層
mark-dateArray[]一些特殊日期標注,例如 [‘2022-03-08’, ‘2022-06-18’, ‘2022-11-11’]
lock-dateArray[]鎖定的日期,只能在指定日期下切換,當滑塊拖動到其他位置,自動跳到離指定日期最近的日期處例如 [‘2022-03-08’, ‘2022-06-18’, ‘2022-11-11’]
playBooleanfalse播放
playSpeedNumber1000播放速度,同 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+axios+promise實際開發(fā)用法詳解

    vue+axios+promise實際開發(fā)用法詳解

    這篇文章主要介紹了vue+axios+promise實際開發(fā)用法詳解,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2018-10-10
  • 基于element-UI input等組件寬度修改方式

    基于element-UI input等組件寬度修改方式

    這篇文章主要介紹了基于element-UI input等組件寬度修改方式,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2023-03-03
  • vue移動端寫的拖拽功能示例代碼

    vue移動端寫的拖拽功能示例代碼

    這篇文章主要介紹了vue移動端寫的拖拽功能,本文通過實例代碼給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下
    2020-09-09
  • vue組件如何被其他項目引用

    vue組件如何被其他項目引用

    這篇文章主要為大家詳細介紹了vue組件如何被其他項目引用,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2017-04-04
  • vue.js如何刪除數(shù)組中指定索引的元素

    vue.js如何刪除數(shù)組中指定索引的元素

    這篇文章主要介紹了vue.js如何刪除數(shù)組中指定索引的元素問題,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2023-06-06
  • el-table渲染慢卡頓問題最優(yōu)解決方案

    el-table渲染慢卡頓問題最優(yōu)解決方案

    本文主要介紹了el-table渲染慢卡頓問題最優(yōu)解決方案,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧
    2022-08-08
  • Vue使用distpicker插件實現(xiàn)省市級下拉框三級聯(liá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-02
  • vue項目在webpack2實現(xiàn)移動端字體自適配功能

    vue項目在webpack2實現(xiàn)移動端字體自適配功能

    這篇文章主要介紹了vue項目在webpack2實現(xiàn)移動端字體自適配的相關(guān)知識,本文通過圖文并茂的形式給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下
    2020-06-06
  • Vue實現(xiàn)boradcast和dispatch的示例

    Vue實現(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傳參(接收參數(shù))$router $route的區(qū)別

    今天做項目時踩到了vue-router傳參的坑(jquery和params),所以決定總結(jié)一下二者的區(qū)別。感興趣的朋友跟隨腳本之家小編一起看看吧
    2018-08-08

最新評論