自定义轮播图组件样式

绝地灬酷狼 2022-01-23 00:47 319阅读 0赞

# **前言** #

> 如果使用一个组件库的组件，如mint-ui的swipe组件，但indicators样式不想要默认的样式（简单的圆点），即自定义组件样式。

# **解决思路** #

## **1.重写样式。** ##

**找到组件中原样式的名字，重写样式。**像mint-ui中swipe indicator的样式为 .mint-swipe-indicator

.mint-swipe-indicator {
      width: 30px;
      height: 30px;
      background: url(../../assets/logo.png);
    }
    .mint-swipe-indicator.is-active {
      background: red;
    }

注：如果你每一个swipe组件都想要一样的自定义样式，那我们可以先使用自定义样式把它封装成组件，再复用该组件即可。

但是每一个样式都得看看它的源码也挺麻烦的~

## 2.在页面上添加按钮结构 ##

2.1 我们将swipe组件封装起来，swipe.vue

2.2 在页面上添加按钮结构，给mt-swipe绑定@change="handleChange"事件，用于处理自定义按钮的active状态

<template>
      <div class="my-swipe">
        
        <mt-swipe class='swiper' @change="handleChange" :showIndicators="false">
            <mt-swipe-item class="banner-item" v-for="item in data" :key="item.key_word" :data-id="item.key_word">
              <img class='item-image' :src="item.img.url">
            </mt-swipe-item>
        </mt-swipe>
    
        
        <div class="my-swipe-indicators">
            <div class="my-swipe-indicator"
                    v-for="(item,index) in data" :key="item.key_word"
                    :class="{ 'is-active': index === mySwipeIndex }">
            </div>
        </div>
      </div>
    </template>
    
    <script scoped>
    export default {
      props: ["data"],
      data() {
        return {
          mySwipeIndex: 0
        };
      },
      methods: {
        handleChange(index) {
          console.log(index);
          this.mySwipeIndex = index;
        }
      }
    };
    </script>
    <style>
    .my-swipe {
      width: 100%;
    }
    .my-swipe-indicators {
      overflow: hidden;
      width: 160px;
      margin: 0 auto;
    }
    .my-swipe-indicator {
      float: left;
      width: 30px;
      height: 30px;
      margin: 5px;
      background: url(../assets/logo.png);
    }
    .my-swipe-indicator.is-active {
      background: red;
    }
    </style>

2.3 调用该组件

<my-swipe :data="bannerArr">
    </my-swipe>

# **效果：** #

1.默认样式效果：

![20190601155736442.gif][]

2.自定义样式效果：（很丑，但是很温柔~就简单的一个示例效果）

![20190601155800690.gif][]

# **结束~** #

![20190510130531760.jpg][]

[20190601155736442.gif]: /images/20220123/a7d0245d0afe4b1aa093f8dbfd22e51e.png
[20190601155800690.gif]: /images/20220123/388aba2de32e4830a5561cc65a87da9f.png
[20190510130531760.jpg]: /images/20220123/c56c549cb39d479b82a93d08cc55de26.png