自定义轮播图组件样式

前言

如果使用一个组件库的组件，如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">
    <!-- mint-ui组件 -->
    <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.默认样式效果：

 

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

 

 

 

结束~