vue-awesome-swiper修改分页器颜色

最新推荐文章于 2022-11-08 15:11:30 发布

Pineblossom

最新推荐文章于 2022-11-08 15:11:30 发布

阅读量2.4k

点赞数

分类专栏： vue 文章标签： vue css

本文链接：https://blog.csdn.net/Crazy_Sakura/article/details/105284712

版权

vue 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

在vue-awesome-swiper组件API中没找到设置分页器颜色的属性，如果你找到了，欢迎在评论区留言，万分感谢！
下面说一下如何通过css自定义分页器样式：

<template>
    <swiper :class="$style.content" ref="mySwiper" :options="swiperOptions">
        <swiper-slide :class="$style.item">
            <img src="//gw.alicdn.com/imgextra/i2/98/O1CN01FAJTpN1CavPFBR5Vx_!!98-0-lubanu.jpg" alt="">
        </swiper-slide>
        <swiper-slide :class="$style.item">
            <img src="//aecpm.alicdn.com/simba/img/TB1CWf9KpXXXXbuXpXXSutbFXXX.jpg_q50.jpg" alt="">
        </swiper-slide>
        <swiper-slide :class="$style.item">
            <img src="//gw.alicdn.com/imgextra/i2/651324/O1CN015wnip71LeQyvuMH0A_!!651324-0-lubanu.jpg" alt="">
        </swiper-slide>
        <div class="swiper-pagination" slot="pagination"></div>
    </swiper>
</template>

<style lang="scss" module>
.content {
    .item {
        img {
            height: 120px;
            width: 100%;
        }
    }
}
:root {	// 这以下的代码是你需要的
    --swiper-theme-color: rgb(255, 80, 0);
}
</style>

这里需要注意的是不要用scoped去控制你的CSS作用域，不然设置样式不会生效，可以通过css module来设置作用域，需要注意的是如果你采用了这种方式，在class中引入样式需要在样式名前面加上$style.，同时class需要使用动态绑定v-bind的方式。

这里简单说一下关于scoped和module的异同：

相同点

两者都是为了解决 CSS 类名相互干扰的问题，也就是大家常说的“作用域”问题。使用两种方案都可以达到类似效果，但是两者的区别也很明显。

不同点

CSS Module 是所有组件化框架都支持的技术方案，他不属于某个框架的私有属性。而 scoped 是 Vue 框架的私有属性。
CSS Module 的工作原理直白的讲就是把一个类名做 md5 ，然后在引用的时候直接使用 md5 字符串，进而保证相同的类名根据不同的路径和组件名称得到不同的 md5 值，保证了最终的类名隔离。而 scoped 的做法是做命名空间限制，也就是说每个组件就是一个命名空间，每个命名空间拥有不同的类名（md5）,然后每个下面的类名都会挂在这个命名空间下进而达到隔离。
对于父组件声明的类名，在子组件内，CSS Module 是不处理的，想用必须显示调用类名($style.类名)，而使用了 scoped 的因为是命名空间的方式，所以子组件依然有效。