说明： 先查看下列文章：
swiper插件怎么设置鼠标经过缩略图标切换图片_浅笑0104的博客-CSDN博客
重点说一下如何实现功能：
组件绑定data-index
<swiper
ref="mySwiper"
class="swiper"
:options="swiperOption"
>
<swiper-slide v-for="(resume,index ) in resumes" :key="index">
<router-link :to="`/resumes/${resume.resumeName}`">
<img
:src="resume.resume"
alt=""
:data-index="`${resume.resumeName}`"
@mouseenter="onMouseEnter"
@mouseleave="onMouseLeave"
@contextmenu.prevent="onContextmenu"
>
</router-link>
</swiper-slide>
<div slot="pagination" class="swiper-pagination" />
</swiper>同时也绑定了鼠标移入移出事件
<router-link :to 表示点击后跳转，可以绑定图片路径即路由地址
当鼠标移动到图片上时，进行文件名赋值
methods: {
/** 鼠标移入 */
onMouseEnter() {
$('.swiper-slide').hover(function(e) {
Name = e.target.dataset.index
})
return this.mySwiper.autoplay.stop()
},
// 鼠标移出
onMouseLeave() {
// console.log(this.mySwiper)
return this.mySwiper.autoplay.start()
},
}注意： $是jquery里的选择器。需要导入，直接npm i
vue页面引入：
import $ from 'jquery'获取ref属性
computed: {
// 获取可计算的swiper
mySwiper() {
// mySwiper 是要绑定到标签中的ref属性
return this.$refs.mySwiper.swiper
}注意： 在template里要进行绑定，如：
<swiper
ref="mySwiper"
class="swiper"
:options="swiperOption"
>定义全局变量，接收鼠标移入后的data-index值
添加轮播暂停与继续
当鼠标移动到图片上，图片循环暂停，便于用户右键下载Pdf
效果
