Minimalist UI

Swiper 轮播

引入组件

<template>
  <div>
    <m-swiper>
      <m-swiper-item name="1">
        <div class="box box-red"></div>
      </m-swiper-item>
      <m-swiper-item name="2">
        <div class="box box-green"></div>
      </m-swiper-item>
      <m-swiper-item name="3">
        <div class="box box-yellow"></div>
      </m-swiper-item>
      <m-swiper-item name="4">
        <div class="box box-blue"></div>
      </m-swiper-item>
    </m-swiper>
  </div>
</template>

<script>
  import { MSwiper, MSwiperItem } from "@csr/m_ui";
  export default {
    components: {
      MSwiper,
      MSwiperItem
    }
  }
</script>

基础用法
代码
<m-swiper>
  <m-swiper-item name="1">
    <div class="box box-red"></div>
  </m-swiper-item>
  <m-swiper-item name="2">
    <div class="box box-green"></div>
  </m-swiper-item>
  <m-swiper-item name="3">
    <div class="box box-yellow"></div>
  </m-swiper-item>
  <m-swiper-item name="4">
    <div class="box box-blue"></div>
  </m-swiper-item>
</m-swiper>

自动轮播
代码
<m-swiper :autoplay="true">
  <m-swiper-item name="1">
    <div class="box box-red"></div>
  </m-swiper-item>
  <m-swiper-item name="2">
    <div class="box box-green"></div>
  </m-swiper-item>
  <m-swiper-item name="3">
    <div class="box box-yellow"></div>
  </m-swiper-item>
  <m-swiper-item name="4">
    <div class="box box-blue"></div>
  </m-swiper-item>
</m-swiper>

默认展示
代码
<m-swiper active="2" arrow="always">
  <m-swiper-item name="1">
    <div class="box box-red"></div>
  </m-swiper-item>
  <m-swiper-item name="2">
    <div class="box box-green"></div>
  </m-swiper-item>
  <m-swiper-item name="3">
    <div class="box box-yellow"></div>
  </m-swiper-item>
  <m-swiper-item name="4">
    <div class="box box-blue"></div>
  </m-swiper-item>
</m-swiper>

隐藏指示器
代码
<m-swiper :autoplay="true" :visible-dots="true" arrow="always">
  <m-swiper-item name="1">
    <div class="box box-red"></div>
  </m-swiper-item>
  <m-swiper-item name="2">
    <div class="box box-green"></div>
  </m-swiper-item>
  <m-swiper-item name="3">
    <div class="box box-yellow"></div>
  </m-swiper-item>
  <m-swiper-item name="4">
    <div class="box box-blue"></div>
  </m-swiper-item>
</m-swiper>

不循环
代码
<m-swiper :loop="false">
  <m-swiper-item name="1">
    <div class="box box-red"></div>
  </m-swiper-item>
  <m-swiper-item name="2">
    <div class="box box-green"></div>
  </m-swiper-item>
  <m-swiper-item name="3">
    <div class="box box-yellow"></div>
  </m-swiper-item>
  <m-swiper-item name="4">
    <div class="box box-blue"></div>
  </m-swiper-item>
</m-swiper>

切换箭头

一直展示

鼠标悬停时展示

隐藏
代码
<p>一直展示</p>
<m-swiper arrow="always">
  <m-swiper-item name="1">
    <div class="box box-red"></div>
  </m-swiper-item>
  <m-swiper-item name="2">
    <div class="box box-green"></div>
  </m-swiper-item>
  <m-swiper-item name="3">
    <div class="box box-yellow"></div>
  </m-swiper-item>
  <m-swiper-item name="4">
    <div class="box box-blue"></div>
  </m-swiper-item>
</m-swiper>
<p>鼠标悬停时展示</p>
<m-swiper arrow="hover">
  <m-swiper-item name="1">
    <div class="box box-red"></div>
  </m-swiper-item>
  <m-swiper-item name="2">
    <div class="box box-green"></div>
  </m-swiper-item>
  <m-swiper-item name="3">
    <div class="box box-yellow"></div>
  </m-swiper-item>
  <m-swiper-item name="4">
    <div class="box box-blue"></div>
  </m-swiper-item>
</m-swiper>
<p>隐藏</p>
<m-swiper arrow="never">
  <m-swiper-item name="1">
    <div class="box box-red"></div>
  </m-swiper-item>
  <m-swiper-item name="2">
    <div class="box box-green"></div>
  </m-swiper-item>
  <m-swiper-item name="3">
    <div class="box box-yellow"></div>
  </m-swiper-item>
  <m-swiper-item name="4">
    <div class="box box-blue"></div>
  </m-swiper-item>
</m-swiper>

纵向
代码
<m-swiper :vertical="true" arrow="never" :autoplay="true">
  <m-swiper-item name="1">
    <div class="box box-red"></div>
  </m-swiper-item>
  <m-swiper-item name="2">
    <div class="box box-green"></div>
  </m-swiper-item>
  <m-swiper-item name="3">
    <div class="box box-yellow"></div>
  </m-swiper-item>
  <m-swiper-item name="4">
    <div class="box box-blue"></div>
  </m-swiper-item>
</m-swiper>

API

属性说明类型默认值
delay 轮播切换时间，单位ms number 3000
active 默认激活的面板，值为m-swiper-item的name string | number
autoplay 是否开启自动轮播 boolean false
visibleDots 是否隐藏指示器 boolean false
vertical 是否为纵向 boolean false
loop 是否开启无限轮播 boolean true

MSwiper

属性说明类型默认值
name 当前面板的标识，必传，该属性的值唯一。 string | number

事件

事件名 说明 回调参数
change 激活面板发生改变时触发 (name: string | number, index: number)

← Menu 菜单 →