vue-plain-slider v1.1.1

vue-plain-slider

一个基于Vue的简单滑块/轮播组件

English Document

特性

• 获取异步数据
• 轻量级, 无其他依赖
• 导航, 分页 和 箭头
• 触摸、鼠标控制
• 水平或者垂直滑动, 左或右对齐

安装

npm install --save vue-plain-slider # Or yarn add vue-plain-slider

使用

基础用法

<template>
  <Slider
    ref="Slider"
    direction="horizontal"
    :mousewheel-control="true"
    :performance-mode="true"
    :pagination-visible="true"
    :pagination-clickable="true"
    :loop="true"
    :speed="500"
    @slide-change-start="onSlideChangeStart"
    @slide-change-end="onSlideChangeEnd">
      <div>Page 1</div>
      <div>Page 2</div>
      <div>Page 3</div>
  </Slider>
</template>

## 更多Demo

* [完整实例](https://github.com/songyazhao/vue-plain-slider/blob/master/src/views/Demo/Full.vue)

*垂直*

![Vertical.gif](http://ohef3m3y6.bkt.clouddn.com/vue-plain-slider/Vertical.gif)

*水平*

![Horizontal.gif](http://ohef3m3y6.bkt.clouddn.com/vue-plain-slider/Horizontal.gif)

*循环*

![Loop-Mode.gif](http://ohef3m3y6.bkt.clouddn.com/vue-plain-slider/Loop-Mode.gif)

*子元素不固定大小*

![Different-Children-Size.gif](http://ohef3m3y6.bkt.clouddn.com/vue-plain-slider/Different-Children-Size.gif)

*嵌套宫格式*

![Nested-Grid-Slider.gif](http://ohef3m3y6.bkt.clouddn.com/vue-plain-slider/Nested-Grid-Slider.gif)

* [如果你想做一个左滑删除的效果](https://github.com/songyazhao/vue-plain-slider/blob/master/src/views/Demo/LeftSliderDelete.vue)

![left-slider-delete.gif](http://ohef3m3y6.bkt.clouddn.com/vue-plain-slider/left-slider-delete.gif)

## Api
### Properties
| Name                 | Type      | Default      | Description                                                 |
|----------------------|-----------|--------------|-------------------------------------------------------------|
| align                | `String`  | `"left"`     | 对齐方向，`direction`为`'horizontal'`时有效，可选 `'left'`、`'right'`。|
| auto                 | `Boolean` | `false`      | 是否自动轮播。                                               |
| asyncData            | `Array`、`Boolean` | `false` | 为`false`时表示数据不需要异步，当数据为异步获取或者需要动态改变的时，必须加此属性，值为与v-for绑定的同一字段 |
| curPage              | `Number`  | `1`          | 设置默认从第几个开始。                                        |
| direction            | `String`  | `"vertical"` | 滑动方向，可选 `'horizontal'`(水平) 或者 `'vertical'`(垂直)。  |
| dragEnable           | `Boolean` | `true`       | 是否启用拖拽。                                               |
| mousewheel-control   | `Boolean` | `true`       | 设置为 `true` 使slider可以通过鼠标滚轮控制。                   |
| pagination-visible   | `Boolean` | `false`      | 是否显示切换的分页 (hide/true)。                              |
| pagination-clickable | `Boolean` | `false`      | 如果为 true 点击分页切换到对应的滑块。                         |
| performance-mode     | `Boolean` | `true`       | 是否启用过渡,关闭过渡会提升相应的渲染性能。                     |
| loop                 | `Boolean` | `false`      | 是否启用轮播模式。                                            |
| interval             | `Number`  | `3000`       | 触发下一次轮播的时间，`auto`为`true`时有效                     |
| speed                | `Number`  | `500`        | 滑块之间的过渡时间。                                          |

### Methods
| Method            | Description              |
|-------------------|--------------------------|
| next()            | 下一个滑块。             |
| prev()            | 上一个滑块。             |
| setPage(`Number`) | 跳到指定页数的滑块。     |

### Events
| Name                            | Arguments | Description                           |
|--------------------|------------------------|---------------------------------------|
| slide-change-start | `pageNumber` `element` | 动画之前触发(到下一个或上一个滑块)。  |
| slide-change-end   | `pageNumber` `element` | 动画之后触发(到下一个或上一个滑块)。  |
| slide-revert-start | `pageNumber` `element` | 动画之前触发(没有变化)。              |
| slide-revert-end   | `pageNumber` `element` | 动画之后触发(没有变化)。              |
| slider-move        | `offset`               | 回调函数,触摸移动过程中触发。         |

## License

[MIT](https://github.com/songyazhao/vue-plain-slider/blob/master/LICENSE)