这里我使用了vant的Swipe组件,由于vant是移动端的组件库,对pc端会有兼容性问题,例如Swipe,移动端是@touch,该组件做了相应的监听,而PC端是@mouse,没有做对应的监听,因此在pc端无法用鼠标拖动图片
1.安装插件
cnpm i @vant/touch-emulator --save 或者 cnpm i @vant/touch-emulator --save
2.mian.js引入
import '@vant/touch-emulator'
3.img标签加上@dragstart.prevent事件
<van-swipe>
<van-swipe-item class="row2">
<div
v-for="item in secondaryAdvertBarVO.slice(0, 4)"
:key="item.advDataId"
class="card"
>
<img @dragstart.prevent :key="item.advDataId" :src="item.imgPath" />
<div class="title">{{ item.title }}</div>
<div class="des">{{ item.description }}</div>
</div>
</van-swipe-item>
</van-swipe>
文章介绍了在使用vant移动端组件库中的Swipe组件时,由于PC端与移动端事件监听差异导致无法鼠标拖动图片的问题。作者提供了安装touch-emulator插件并应用`dragstart.prevent`事件的解决方案来解决此兼容性问题。



355

被折叠的 条评论
为什么被折叠?



