vue --- > mintUI中Swipe(轮播图)的使用

引入

// main.js
// 导入包
import { Swipe, SwipeItem } from 'mint-ui'

// 注册
Vue.component(Swipe.name, Swipe);
Vue.component(SwipeItem.name, SwipeItem);

放在需要显示的位置

// HomeContainer.vue(首页 -> 组件)
<template>
    <div>
        <!-- 轮播图区域 -->
        <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>
    </div>
</template>

轮播图需要高度

// HomeContainer.vue
<template>
...
</template>

<style lang="scss" scoped>
    .mint-swipe {
        height: 200px;
    }
</style>

设置轮播图每一张图片的颜色

// css写法
<style lang='scss' scoped>
    .mt-swipe-item:nt