构建Vue.js组件:slider

Slider组件的使用场景很多，主要为图片的展示。一个slider主要由顶层容器和每一'帧'的slide组成。下面通过一个例子尝试基于Vue.js去构建一个Slider组件，支持以下功能：

• 上一帧／下一帧 导航

• 自动播放

• 播放效果(slide/fade)

• 无限循环

• Dot

• Dot hover 导航

Slider 顶层容器

<template>
  <div class="wrapper">
    <ul id="slider">
      <slot></slot>
    </ul>
    <span class="prev" id="prev" v-show="control"></span>
    <span class="next" id="next" v-show="control"></span>
  </div>
</template>

<slot>标签处便是每一帧的slide，可在子组件中使用v-for结合一个储存图片地址的数组遍历输出。更多关于slot

api

由于slider 支持多个可用户自定义的api，所以需要在props中声明这些支持的自定义属性，以便在组件声明时使用：

// ...
props: {
  // 上一帧／下一帧 导航
  control: {
    type: Boolean,
    default: true
  },
  // 自动播放
  auto: {
    type: Boolean,
    default: false
  },
  // 播放效果(slide/fade)
  effect: {
    type: String,
    default: 'fade'
  },
  // dot
  dot: {
    type: Boolean,
    default: true
  },
  // Dot hover 导航
  dotHover: {
    type: Boolean,
    default: true
  },
  // Dot 位置(left | center | right)
  dotFloat: {
    type: String,
    default: 'center'
  }
},
// ...

滑动特效

slider 组件支持两种特效：slide和fade。

• slide特效的每一次滑动都改变slider的right值，结合CSS3的transition来实现滑动。

• fade特效为改变当前帧的opacity趋向0，目标帧的opacity趋向1，通过一个定时器setTimeout控制，从而实现渐隐渐现的效果。这时需考虑自动播放为true时手动去点击上一帧／下一帧时需先清除这个定时器。

如何使用

import slider from 'slider'
import slide from 'slide'

然后...

<slider control="true" dot="true" dot-float="center" effect="fade">
  <slide v-for="item in items">
     <li>
       <div>{{$index}}</div>
     </li>
  </slide>
</slider>

当当当 好了.

说了那么多(￣ー￣)，源码－> Link