<template>
 <swiper :options="swiperOption">
<!--作为一个滚动条，仅需要一个swiper-slide，将内容放在插槽内-->
<swiper-slide>
     <slot></slot>
   </swiper-slide>
<!--控制是否有scrollbar-->
<div class="swiper-scrollbar" v-if="scrollbar" solt="scrollbar"></div>
 </swiper>
</template>

<script>
// 引入swiper插件作为滚动条
import {swiper, swiperSlide} from 'vue-awesome-swiper';

export default {
   name: 'MeScroll',
components: {
     swiper,
swiperSlide
   },
props: {
     scrollbar: {
       type: Boolean,
default: true
}
   },
data() {
     return {
       swiperOption: {
         direction: 'vertical',
slidesPerView: 'auto', // 一页幻灯片显示多少张
freeMode: true, // 自由滑动，不强制滑动显示一张幻灯片大小
setWrapperSize: true, // 将计算后的高度设置swiper-wrapper的height
scrollbar: {
           el: this.scrollbar ? '.swiper-scrollbar' : null,
hide: true // 是否自动隐藏scrollbar
}
       }
     };
}
 };
</script>

<style lang="scss" scoped>
/*撑开父容器，即视口宽度*/
.swiper-container {
   overflow: hidden;
height: 100%;
width: 100%;
}

 /*内容比容器高才能滚动*/
.swiper-slide {
   height: auto;
}
</style>