vue 轮播图鼠标拖拽轮播实现

实现鼠标拖拽轮播，可以结合 Vue 和第三方插件来完成。以下是一个基于 Vue 和 vue-awesome-swiper 插件实现鼠标拖拽轮播的示例：

1. 安装 vue-awesome-swiper 插件

npm install vue-awesome-swiper --save

2. 在 Vue 组件中引入并初始化 swiper 组件

<template>
  <div class="swiper-container" ref="swiper">
    <div class="swiper-wrapper">
      <div class="swiper-slide" v-for="(item, index) in list" :key="index">
        <img :src="item.imgUrl" alt="">
      </div>
    </div>
  </div>
</template>

<script>
import Vue from 'vue'
import VueAwesomeSwiper from 'vue-awesome-swiper'

Vue.use(VueAwesomeSwiper)

export default {
  data () {
    return {
      list: [
        { imgUrl: 'http://xxx.com/1.jpg' },
        { imgUrl: 'http://xxx.com/2.jpg' },
        { imgUrl: 'http://xxx.com/3.jpg' },
        { imgUrl: 'http://xxx.com/4.jpg' }
      ]
    }
  },
  mounted () {
    this.$nextTick(() => {
      this.swiper = new this.$swiper(this.$refs.swiper, {
        slidesPerView: 'auto',
        freeMode: true,
        freeModeMomentumRatio: 0.5,
        freeModeMomentumBounce: false,
        freeModeMinimumVelocity: 0.1,
        grabCursor: true,
        mousewheel: true,
        resistanceRatio: 0.1
      })
    })
  },
  beforeDestroy () {
    if (this.swiper) {
      this.swiper.destroy()
    }
  }
}
</script>

<style lang="scss">
.swiper-container {
  width: 100%;
  height: 100%;
  .swiper-wrapper {
    display: flex;
    .swiper-slide {
      width: 33.33%;
      img {
        width: 100%;
      }
    }
  }
}
</style>

3. 在 mounted 钩子中初始化 swiper 实例，并设置相关参数。

mounted () {
  this.$nextTick(() => {
    this.swiper = new this.$swiper(this.$refs.swiper, {
      slidesPerView: 'auto',
      freeMode: true,
      freeModeMomentumRatio: 0.5,
      freeModeMomentumBounce: false,
      freeModeMinimumVelocity: 0.1,
      grabCursor: true,
      mousewheel: true,
      resistanceRatio: 0.1
    })
  })
}

通过设置 `freeMode: true` 启用 freeMode 模式，`grabCursor: true` 启用鼠标拖拽模式，`mousewheel: true` 启用鼠标滚轮控制模式等参数，可以实现鼠标拖拽轮播效果。