問題
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中預定義的高。
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>里面寫分頁器分頁點的樣式
.