Vue使用Swiper，鼠标、滚轮操作全屏切换

Vue使用Swiper，鼠标、滚轮操作全屏切换

Swiper官网，查看API
因为Swiper鼠标控制存在BUG，只能控制一页切换，Vue-cli只能安装5.3.7新版本，所以手动安装依赖

安装4xx版本的Swiper可以正常演示

// 在项目文件内安装
npm install swiper@4.4.2 --save

安装Vue-awesome-swiper,操作Swiper

Vue-awesome-swiper官方文档
因为swiper使用的是4xx版本的，所以Vue-awesome-swiper也是用旧版本3.1.3，手动安装依赖

// 在项目文件内安装
npm install vue-awesome-swiper@3.1.3 --save

安装成功后，在项目main.js全局引入，并挂载

import VueAwesomeSwiper from 'vue-awesome-swiper'

// require styles
import 'swiper/dist/css/swiper.css'

Vue.use(VueAwesomeSwiper, /* { default global options } */)

局部导入可以查看Vue-awesome-swiper官方文档

然后就是组件引用啦

<template>
    <swiper :options="swiperOption" ref="mySwiper">
    <!-- slides -->
    <swiper-slide>I'm Slide 1</swiper-slide>
    <swiper-slide>