vant ui Swipe pc端滑动失效

cjxIt

已于 2023-08-11 15:14:54 修改

阅读量1.2k

点赞数 4

文章标签：前端 javascript 开发语言

于 2023-08-11 15:14:16 首次发布

本文链接：https://blog.csdn.net/cjxIt/article/details/132231989

版权

这里我使用了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>