vue+swiper实现侧滑菜单效果

},
verticalSwiper(){
return this.$refs.verticalSwiper.swiper;
}
}
}
</script>

<style scoped lang="scss">
@import "src/base/css/public/variable.scss";
@import "swiper/dist/css/swiper.css";

.s-slider {
height: 100%;
color: white;
.swiper-container {
@include fill-with-parent
}
}
</style>

 该组件自定义了四个属性，分别是左右侧滑菜单的宽度，上下滑动菜单的高度，leftWdith、rightWidth、topHeight、bottomHeight，然后用了一个横向的轮播用来存放左滑菜单，中间内容，右滑菜单，然后在中间内容又放了一个纵向的轮播用来放置上滑菜单，内容以及下滑菜单，具体思路就是这样。在组件挂载的时候，需要根据父组件传入的数值去初始化四个菜单的宽高，初始化完毕宽高之后，还要调用swiper本身的updateSlides更新所有的slides，不然滑动的时候，还是按照没设置之前的宽高进行滑动。在父组件中调用：

<s-slider leftWidth="200px" rightWidth="300px" topHeight="100px" bottomHeight="150px">
  <div slot="left">
  left
  </div>
  <div slot="content">
  Content
  </div>
  <div slot="right">
  right
  </div>
  <div slot="top">
  top
  </div>
  <div slot="bottom">
  bottom
  </div>
 </s-slider>

不要忘了在父组件中还要引入这个vue组件。