【vue中修改swiper样式】

原文：https://www.cnblogs.com/fightjianxian/p/11920913.html

vue中修改swiper样式

问题：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 预设样式权重高。

产生原因

• 单文件中的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>

• 不使用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 -->