使用scoped穿透方法实现修改vue中mint UI组件样式

效果:

使用scoped穿透方法实现修改vue中mint UI组件样式_第1张图片

代码:

<div class="goods-swiper">
  <mt-swipe :auto="5000" :show-indicators="true">
    <mt-swipe-item v-for="(item,index) in goodSwiperLists" :key="index"><img :src="item.image">mt-swipe-item>
  mt-swipe>
div>

修改mint UI swiper组件默认样式.mint-swipe-indicator和.mint-swipe-indicator.is-active,在页面中style使用了scoped之后,直接修改样式根本实现不了,之前一直是给要修改的单独加一个class使用两个。

    另外一种方式就是使用scoped穿透方法。

代码:


使用‘>>>’样式修改成功。




你可能感兴趣的:(工作总结,工作总结,vue)