自定义轮播图组件样式

前言

如果使用一个组件库的组件，如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状态

2.3 调用该组件

 

效果：

1.默认样式效果：

 

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

 

 

 

结束~