前言：上篇講了vue里面輪播圖組件的使用，還有有個(gè)小問題可以優(yōu)化一下。

1、焦點(diǎn)問題

我們看到這里的焦點(diǎn)會(huì)有一個(gè)默認(rèn)的顏色，改變這個(gè)焦點(diǎn)顏色也有一個(gè)小坑。

image

2、如何解決

（1）這里我們要用到vue的深度作用選擇器，關(guān)于深度作用選擇其詳情看一看官網(wǎng)介紹：https://vue-loader-v14.vuejs.org/zh-cn/features/scoped-css.html

image

（2）用開發(fā)者工具找到這個(gè)點(diǎn)的class類名

image

（3）使用深度選擇器把這個(gè)點(diǎn)變?yōu)榘咨?carousel.vue

<style lang="less" scoped>
  .carousel {
    /deep/ .swiper-pagination-bullet-active {
      background: #fff;
    }
    .myswiper_img {
      width: 100%;
      height: 4rem;
    }
  }
</style>

ps：less里面不能用 >>> 這樣寫。

3、ok，最后的瀏覽器的效果就是這樣了，perfect

image

參考學(xué)習(xí)
https://github.com/surmon-china/vue-awesome-swiper
http://www.swiper.com.cn/api/index2.html
https://vue-loader-v14.vuejs.org/zh-cn/features/scoped-css.html