.container >>> .swiper-container overflow: inherit无法穿透

Question

现象如下：

代码：

<template>

  <div class="container">

    <div class="wrapper">

      <swiper :options="swiperOptions">

        <swiper-slide>

          <img class="gallary-img" src="http://img1.qunarzz.com/sight/p0/1412/be/c788f0f3767d2ea037b9b66d2010bfa4.water.jpg_r_800x800_2ddc6f15.jpg" />

        </swiper-slide>

        <swiper-slide>

          <img class="gallary-img" src="http://img1.qunarzz.com/sight/p0/1712/67/678aa50844275f8ba3.img.jpg_r_800x800_3b75e50a.jpg" />

        </swiper-slide>

        <div class="swiper-pagination"  slot="pagination"></div>

      </swiper>

    </div>

  </div>

</template>

<script>

export default {

  name: 'CommonGallary',

  data () {

    return {

      swiperOptions: {

        pagination: '.swiper-pagination',

        type: 'fraction'

      }

    }

  }

}

</script>

<style socped>

  .container >>> .swiper-container

    overflow: inherit

  .container

    display: flex

    flex-direction: column

    justify-content: center

    z-index: 99

    position: fixed

    left: 0

    right: 0

    top: 0

    bottom: 0

    background: #000

    .wrapper

      height: 0

      width: 100%

      padding-bottom: 100%

      .gallary-img

        width: 100%

      .swiper-pagination

        color: #fff

        bottom: -1rem

</style>

Answer 1

提问者 慕的地2446357 2018-06-08 15:50:01

好吧，是自己蠢了，type: 'fraction'这行写错了，应该是paginationType: 'fraction'，自己在那瞎忙活了

具体代码

<template>

  <div class="container">

    <div class="wrapper">

      <swiper :options="swiperOptions">

        <swiper-slide>

          <img class="gallary-img" src="http://img1.qunarzz.com/sight/p0/1412/be/c788f0f3767d2ea037b9b66d2010bfa4.water.jpg_r_800x800_2ddc6f15.jpg" />

        </swiper-slide>

        <swiper-slide>

          <img class="gallary-img" src="http://img1.qunarzz.com/sight/p0/1712/67/678aa50844275f8ba3.img.jpg_r_800x800_3b75e50a.jpg" />

        </swiper-slide>

        <div class="swiper-pagination" slot="pagination"></div>

      </swiper>

    </div>

  </div>

</template>

<script>

export default {

  name: 'CommonGallary',

  data () {

    return {

      swiperOptions: {

        pagination: '.swiper-pagination',

        paginationType: 'fraction'

      }

    }

  }

}

</script>

<style scoped>

  .container >>> .swiper-container

    overflow: inherit

  .container

    display: flex

    flex-direction: column

    justify-content: center

    z-index: 99

    position: fixed

    left: 0

    right: 0

    top: 0

    bottom: 0

    background: #000

    .wrapper

      height: 0

      width: 100%

      padding-bottom: 100%

      .gallary-img

        width: 100%

      .swiper-pagination

        color: #fff

        bottom: -1rem

</style>