在vue单文件组件中使用swiper幻灯片vue-awesome-swiperv组件时，无法修改期原来样式。解决办法是：单文件组件中：新增一个style 不加scoped 让它最终成为全局样式。只在其中操作swiper的样式。
<style lang="scss">
.swiper-container{
.swiper-pagination{
.swiper-pagination-bullet{
width: 14px;
height: 14px;
}
}
}
</style>
// 项目中多次使用swiper 的话 就给swiper-container 添加特定className作为区分。
<div class="swiper-container index-swiper"><div>
<style>
.index-wiper{}
</style>
,2，新建专用于操作swiper 样式的css， 在main.js中引入， 使用！import保证比swiper 预设样式权重高。
产生原因
1，单文件中的template，和style 都会经过vue-loader的编译。在style标签上使用了 scoped 属性的话，template中手写的元素和style之间会通过vue-loader生成的一个自定义属性，形成呼应关系，style只对对应的template起作用。编译过程中由swiper 生成的分页器标签不会经过vue-loader的编译，所以选不到。
// vue-loader 生成的 data-v-2967ba60
footer-bar[data-v-2967ba60] <div class="footer-bar" data-v-2967ba60>
2，不使用scoped 修饰的都是全局样式，如果在全局样式中还是覆盖不了的话说明选择器权重没有swiper中预定义的高。
vue-awesome-swiper 组件内设置样式失效问题
给外框定义id
<swiper class="swiper" id="pa" :options="swiperOption" ref="mySwiper"> <!-- slides --> <swiper-slide style="background: #007aff"> I'm slide 1</swiper-slide> <swiper-slide style="background: yellow"> I'm slide 2</swiper-slide> <swiper-slide style="background: red"> I'm slide 3</swiper-slide> <swiper-slide style="background: green"> I'm slide 4</swiper-slide> <!-- Optional controls --> <div class="swiper-pagination" slot="pagination"></div> </swiper>
方法一：全局覆盖
**单独新建css文件，在index.html引入 **
在组件内书写 不要加scoped
<style>
.swiper {
width: 100%;
height: 600px;
}
swiper-slide {
width: 100%;
height: 600px;
}
.swiper-pagination-bullet {
width: 20px;
height: 20px;
text-align: center;
line-height: 20px;
font-size: 12px;
color:#000;
opacity: 1;
background: rgba(0,0,0,0.2);
}
.swiper-pagination-bullet-active {
color:#fff;
background: #ff51d6;
}
注：如果存在优先级问题 添加 !important提升指定样式规则的应用优先权 例如：
<style>
.swiper-pagination-bullet-active {
color: #fff !important；
}</style>
方法二：局部样式限定
用该组件最外层class包裹内部轮播样式，不加scoped
<style css="less">
.swiper{
.swiper-pagination-bullet-active {
color: #fff；
}
}</style>
方法三：样式穿透（推荐）
/deep/ 是sass和less的样式穿透
#pa /deep/ .swiper-pagination-bullet {
width: 20px;
height: 20px;
text-align: center;
line-height: 20px;
font-size: 12px;
color:#000;
opacity: 1;
background: rgba(0,0,0,0.2);
}
#pa /deep/ .swiper-pagination-bullet-active {
color:#fff;
background: #ff51d6;
}
>>>是stylus的样式穿透
#pa >>> .swiper-pagination-bullet { width: 20px; height: 20px; text-align: center; line-height: 20px; font-size: 12px; color:#000; opacity: 1; background: rgba(0,0,0,0.2); } #pa >>> .swiper-pagination-bullet-active { color:#fff; background: #ff51d6; }
全部代码
<template> <swiper class="swiper" id="pa" :options="swiperOption" ref="mySwiper"> <!-- slides --> <swiper-slide style="background: #007aff"> I'm slide 1</swiper-slide> <swiper-slide style="background: yellow"> I'm slide 2</swiper-slide> <swiper-slide style="background: red"> I'm slide 3</swiper-slide> <swiper-slide style="background: green"> I'm slide 4</swiper-slide> <!-- Optional controls --> <div class="swiper-pagination" slot="pagination"></div> </swiper></template><script>
import {swiper, swiperSlide} from 'vue-awesome-swiper'
import 'swiper/dist/css/swiper.css'
export default {
name: 'carrousel',
data() {
return {
swiperOption: {
// spaceBetween: 30, //板块间距
loop: true, //无缝轮播
centeredSlides: true,
autoplay: { //自动轮播
delay: 3000,
disableOnInteraction: false,
},
pagination: {
el: '.swiper-pagination',
clickable: true,
paginationClickable: false,
paginationType: 'custom',
}
}
}
},
components: {
swiper,
swiperSlide
},
// 如果你需要得到当前的swiper对象来做一些事情，你可以像下面这样定义一个方法属性来获取当前的swiper对象，同时notNextTick必须为true
computed: {
swiper() {
// console.log(this.$refs.mySwiper.swiper);
return this.$refs.mySwiper.swiper
}
},
mounted() {
// 然后你就可以使用当前上下文内的swiper对象去做你想做的事了
console.log('this is current swiper instance object', this.swiper);
// this.swiper.slideTo(3, 1000, false)
console.log('mounted');
//鼠标覆盖停止自动切换
this.swiper.el.onmouseover = function () {
this.swiper.autoplay.stop();
};
//鼠标离开开始自动切换
this.swiper.el.onmouseout = function () {
this.swiper.autoplay.start();
};
}
}</script><style scoped>
.swiper {
width: 100%;
height: 600px;
}
swiper-slide {
width: 100%;
height: 600px;
}
#pa /deep/ .swiper-pagination-bullet {
width: 20px;
height: 20px;
text-align: center;
line-height: 20px;
font-size: 12px;
color:#000;
opacity: 1;
background: rgba(0,0,0,0.2);
}
#pa /deep/ .swiper-pagination-bullet-active {
color:#fff;
background: #ff51d6;
}</style>
其他框架改变样式解决方法——配置全局样式
Swiper的分页器是靠mounted()挂载到Vue组件上而不是直接写在template里，所以在style scoped中写的样式无法作用到分页器的点上。解决办法是把重写的样式写在scoped之外。(以下截图不完整，仅用做说明)
template：
script:
<style scoped></style>里面写不受影响的样式(template里面有的类名)
在<style scoped></style>下面新建一个<style></style>，在<style></style>里面写分页器分页点的样式
问题
vue单文件组件中无法修改swiper样式。
解决
1，单文件组件中：新增一个style 不加scoped 让它最终成为全局样式。只在其中操作swiper的样式。
<style lang="scss">
.swiper-container{
.swiper-pagination{
.swiper-pagination-bullet{
width: 14px;
height: 14px;
}
}
}
</style>
// 项目中多次使用swiper 的话 就给swiper-container 添加特定className作为区分。
<div class="swiper-container index-swiper"><div>
<style>
.index-wiper{}
</style>
,2，新建专用于操作swiper 样式的css， 在main.js中引入， 使用！import保证比swiper 预设样式权重高。
产生原因
1，单文件中的template，和style 都会经过vue-loader的编译。在style标签上使用了 scoped 属性的话，template中手写的元素和style之间会通过vue-loader生成的一个自定义属性，形成呼应关系，style只对对应的template起作用。编译过程中由swiper 生成的分页器标签不会经过vue-loader的编译，所以选不到。
// vue-loader 生成的 data-v-2967ba60
footer-bar[data-v-2967ba60] <div class="footer-bar" data-v-2967ba60>
2，不使用scoped 修饰的都是全局样式，如果在全局样式中还是覆盖不了的话说明选择器权重没有swiper中预定义的高。
