pc端使用vant的Swipe组件,解决无法滚动的问题

需求

最近有个需求,实现在pc端内嵌一个手机版的样式,涉及到了图片滚动的功能,要求用户用鼠标就可以拖动图片。
image.png

实现

这里我使用了vant的Swipe组件,由于vant是移动端的组件库,对pc端会有兼容性问题,例如Swipe,移动端是@touch,该组件做了相应的监听,而PC端是@mouse,没有做对应的监听,因此在pc端无法用鼠标拖动图片。桌面端适配

解决办法:

终端输入cnpm i @vant/touch-emulator --save ,然后在main.js中引入import '@vant/touch-emulator';即可

  • 相关代码如下:注意要禁止与图片的交互操作,否则鼠标拖动图片会有问题,加上@dragstart.prevent指令即可

    
      
    

你可能感兴趣的:(pc端使用vant的Swipe组件,解决无法滚动的问题)