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

最新推荐文章于 2025-06-20 09:08:52 发布

Jerrica

最新推荐文章于 2025-06-20 09:08:52 发布

阅读量4.3k

点赞数

CC 4.0 BY-SA版权

分类专栏：工作总结文章标签：工作总结 vue

本文链接：https://blog.csdn.net/jerrica/article/details/80975006

工作总结专栏收录该内容

11 篇文章

订阅专栏

本文介绍如何使用Mint UI组件库中的轮播图组件，并针对其默认样式进行修改。提供了两种方法来调整轮播指示器的样式：一是通过添加额外的类名；二是利用Scoped样式中的穿透选择器。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果：

代码：

<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使用<style scoped></style>和<style></style>两个。

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

代码：