timeline-slider-vue

KO | EN

gitlite — search

#python #hacktoberfest #go #android #rust #nodejs #windows #awesome #cli #kubernetes #awesome-list #security #openai #open-source

timeline-slider-vue

(★ 12)

带拖动和播放功能的时间轴

timeline-slider-vue Latest Version Download

Download Latest Version (.zip)

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# 带拖动和播放功能的时间轴

timeline-slider-vue

![](https://p.ipic.vip/6zzfj0.jpg)

[Demo](https://liuzhenghe30265.github.io/timeline-slider-vue/)

[Github](https://github.com/liuzhenghe30265/timeline-slider-vue.git)

## Install

```bash
npm install --save timeline-slider-vue
```

## Usage

main.js

```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>
```

[使用示例](https://github.com/liuzhenghe30265/timeline-slider-vue/blob/main/examples/App.vue)

```vue
<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>

### 竖向模式

```vue
    <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

## slot

| **参数**      | **说明** |
| :------------ | :------: |
| sliderContent | 滑块内容 |

## Events

## 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

```

timeline-slider-vue

timeline-slider-vue Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

timeline-slider-vue

timeline-slider-vue Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

Download README