关键词搜索

全站搜索
×
密码登录在这里
×
注册会员

已有账号? 请点击

忘记密码

已有账号? 请点击

使用其他方式登录

vue vue-awesome-swiper组件中修改swiper样式

发布2022-08-26 浏览684次

详情内容

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

点击QQ咨询
开通会员
上传资源赚钱
返回顶部
×
  • 微信支付
  • 支付宝付款
扫码支付
微信扫码支付
请使用微信描二维码支付
×

提示信息

×

选择支付方式

  • 微信支付
  • 支付宝付款
确定支付下载