解決使用vue-awesome-swiper組件分頁器樣式設置失效問題

• 2019 年 10 月 4 日
• 筆記

解決使用vue-awesome-swiper組件分頁器pagination樣式設置失效問題

解決方案：

 給父標籤設置一個id，例如父標籤id="parent"，在sass/less中使用/deep/樣式穿透，例：

#parent /deep/ .swiper-pagination-bullet{        background-color: 'red';  }

在stulys中使用：>>>實現樣式穿透

#parent >>> .swiper-pagination-bullet-active {       border-radius: 'unset';  }

vue穿透詳解：

在一次這樣的需求中，需要實現滑倒底部時自動請求數據，需要動態創建節點然後追加到某元素中，這期間遇到的問題就是在動態創建節點後，類名也已經加上了 ，但是樣式就是沒有生效，最後發現原因的產生竟然是<style scoped></style>中scoped屬性，該屬性的作用是用來綁定當前樣式不被污染。

這時就需要通過 >>> 穿透scoped

stylus的樣式穿透 使用>>>。iview中需要在組件上使用i-class聲明第三方組件類名

<style scoped>      外層 >>> 第三方組件類名{          樣式      }  </style>

有些Sass 、Less之類的預處理器無法正確解析>>>。可以使用/deep/操作符( >>> 的別名)

<style lang="sass" scoped>  /deep/  第三方組件類名 {        樣式    }    </style>

實例：

<template>  	<input i-class="ivu-input">  </template>  // 樣式  .num-input {      width: 90px;      margin-top: 15px;      >>> .ivu-input {        text-align: center!important;      }  }  // Less || Sass  .num-input {      width: 90px;      margin-top: 15px;      /deep/ .ivu-input {        text-align: center!important;      }  }

關於vue項目中使用 vue-awesome-swiper組件 的詳細部落格：https://segmentfault.com/a/1190000014609379