vue-awesome-swiper的安装及使用

1.安装

npm install vue-awesome-swiper --save

2.main.js 导入 和 注册

//引入swiper
import VueAwesomeSwiper from 'vue-awesome-swiper'
//引入swiper 样式
import 'swiper/css/swiper.css'
//注册插件
Vue.use(VueAwesomeSwiper)

3. 注册组件 (实测不用在 components 里注册组件，直接使用标签就可以)

<template>
  <div id="video-list">
    <swiper :options="swiperOption">
      <!-- 幻灯内容 -->
      <swiper-slide>slide1</swiper-slide>
      <swiper-slide>slide2</swiper-slide>
      <swiper-slide>slide3</swiper-slide>
      <swiper-slide>slide4</swiper-slide>
    </swiper>
  </div>
</template>

<script>
import { swiper, swiperSlide } from "vue-awesome-swiper" //导入组件

export default {
  data() {
    return {
      swiperOption: {
        direction: "vertical",
        grabCursor: true,
        setWrapperSize: true,
        autoHeight: true, //自动高度。设置为true时，wrapper和container会随着当前slide的高度而发生变化
        slidesPerView: 1,
        mousewheel: true,
        mousewheelControl: true,
        height: window.innerHeight, // 高度设置，占满设备高度
        resistanceRatio: 0,
        observeParents: true,
      },
    }
  },
}
</script>

<style scoped>
#video-list {
  background-color: black;
}
</style>