vue-awesome-swiper 组件内设置样式失效问题

@感谢羊羊羊0703

vue-awesome-swiper 组件内设置样式失效问题

---

给外框定义id

<swiper class="swiper" id="pa" :options="swiperOption"  ref="mySwiper">
    
    <swiper-slide style="background: #007aff"> I'm slide 1swiper-slide>
    <swiper-slide style="background: yellow"> I'm slide 2swiper-slide>
    <swiper-slide style="background: red"> I'm slide 3swiper-slide>
    <swiper-slide style="background: green"> I'm slide 4swiper-slide>
    
    <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">
    
    <swiper-slide style="background: #007aff"> I'm slide 1swiper-slide>
    <swiper-slide style="background: yellow"> I'm slide 2swiper-slide>
    <swiper-slide style="background: red"> I'm slide 3swiper-slide>
    <swiper-slide style="background: green"> I'm slide 4swiper-slide>
    
    <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>

---

其他框架改变样式解决方法——配置全局样式

—— 对于有样式变量的框架 参考 vux 怎么用 样式变量 修改主题配色

---