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