自定义轮播图组件样式

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

前言

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

解决思路

1.重写样式。

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

  1. .mint-swipe-indicator {
  2.   width: 30px;
  3.   height: 30px;
  4.   background: url(../../assets/logo.png);
  5. }
  6. .mint-swipe-indicator.is-active {
  7.   background: red;
  8. }

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

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

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

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

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

  1. <template>
  2.   <div class="my-swipe">
  3.     <!-- mint-ui组件 -->
  4.     <mt-swipe class='swiper' @change="handleChange" :showIndicators="false">
  5.         <mt-swipe-item class="banner-item" v-for="item in data" :key="item.key_word" :data-id="item.key_word">
  6.           <img class='item-image' :src="item.img.url">
  7.         </mt-swipe-item>
  8.     </mt-swipe>
  10.     <!-- 在组件外添加轮播图按钮 -->
  11.     <div class="my-swipe-indicators">
  12.         <div class="my-swipe-indicator"
  13.                 v-for="(item,index) in data" :key="item.key_word"
  14.                 :class="{ 'is-active': index === mySwipeIndex }">
  15.         </div>
  16.     </div>
  17.   </div>
  18. </template>
  20. <script scoped>
  21. export default {
  22.   props: ["data"],
  23.   data() {
  24.     return {
  25.       mySwipeIndex: 0
  26.     };
  27.   },
  28.   methods: {
  29.     handleChange(index) {
  30.       console.log(index);
  31.       this.mySwipeIndex = index;
  32.     }
  33.   }
  34. };
  35. </script>
  36. <style>
  37. .my-swipe {
  38.   width: 100%;
  39. }
  40. .my-swipe-indicators {
  41.   overflow: hidden;
  42.   width: 160px;
  43.   margin: 0 auto;
  44. }
  45. .my-swipe-indicator {
  46.   float: left;
  47.   width: 30px;
  48.   height: 30px;
  49.   margin: 5px;
  50.   background: url(../assets/logo.png);
  51. }
  52. .my-swipe-indicator.is-active {
  53.   background: red;
  54. }
  55. </style>

2.3 调用该组件

  1. <my-swipe :data="bannerArr">
  2. </my-swipe>

效果：

1.默认样式效果：

20190601155736442.gif

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

20190601155800690.gif

结束~

20190510130531760.jpg

发表评论

表情：
评论列表 （有 0 条评论，413人围观）

还没有评论，来说两句吧...

相关阅读