vue中修改swiper样式

Posted 2022-02-06 keliguicang

问题

　　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中预定义的高。