Mint UI 輪播圖 - Swipe

輪播圖，可自定義輪播時(shí)間間隔、動(dòng)畫時(shí)長等。

引入

import { Swipe, SwipeItem } from 'mint-ui';

Vue.component(Swipe.name, Swipe);
Vue.component(SwipeItem.name, SwipeItem);

例子

基礎(chǔ)用法

<mt-swipe :auto="4000">
  <mt-swipe-item>1</mt-swipe-item>
  <mt-swipe-item>2</mt-swipe-item>
  <mt-swipe-item>3</mt-swipe-item>
</mt-swipe>

隱藏? indicators?

<mt-swipe :show-indicators="false">
  <mt-swipe-item>1</mt-swipe-item>
  <mt-swipe-item>2</mt-swipe-item>
  <mt-swipe-item>3</mt-swipe-item>
</mt-swipe>

取消自動(dòng)播放

<mt-swipe :auto="0">
  <mt-swipe-item>1</mt-swipe-item>
  <mt-swipe-item>2</mt-swipe-item>
  <mt-swipe-item>3</mt-swipe-item>
</mt-swipe>

change 事件

輪播圖切換時(shí)會(huì)觸發(fā) ?change? 事件，參數(shù)為切入輪播圖的索引

<mt-swipe @change="handleChange">
  <mt-swipe-item>1</mt-swipe-item>
  <mt-swipe-item>2</mt-swipe-item>
  <mt-swipe-item>3</mt-swipe-item>
</mt-swipe>

methods: {
  handleChange(index) {
    ...
  }
}

API

Slot

mt-swipe

mt-swipe-item