vant ui Swipe pc端滑动失效

2023-11-09

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

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

vant ui Swipe pc端滑动失效 的相关文章

随机推荐

  • localStorage的高阶用法

    原文 https mp weixin qq com s VBTAWVMAUq822dwNA1A2kg const config type localStorage 本地存储类型 localStorage sessionStorage pre
  • vue项目使用element、vant组件库修改不了css样式 深度修改组件样式

    在修改element vant默认样式时发现用 important都没有效果 解决方案 第一种 直接把style的scoped去掉
  • 人工智能中非平衡数据处理方法、欠采样、过采样讲解(简单易懂)

    非平衡数据产生现象及原因 非平衡数据是人工智能安全中经常遇到的问题 一方面 在采集和准备数据时 由于安全事件发生的可能性不同等因素的影响 使得训练数据存在非平衡 另一方面 机器学习模型的攻击者也可能利用非平衡数据学习所产生的分类效果在多数类
  • springboot集成积木报表JimuReport,打成war包放到tomcat下运行报错,启动过滤器异常

    springboot集成积木报表JimuReport 打成war包放到tomcat下运行报错 启动过滤器异常 这里用的tomcat8 5 这个问题真是找了半天都没解决 真是栓Q啊 把war包放到tomcat9 0下运行 就正确了 一定注意
  • 初学者必看Markdown 使用指南

    什么是 Markdown Markdown 文档遵循一种特定的语法 容易阅读和写作 它们是纯文本 所以能够通过电脑上的任何文本编辑器来创建 然后这些文档能够转换成网页 而网页是用一个叫做 HTML 的语言标记创建的 Markdown 只是一
  • Microsoft Office 2003的安装

    哈喽 大家好 今天一起学习的是office2003的安装 这个老版本的office可是XP操作系统的老搭档了 有兴趣的小伙伴也可以来一起试试手 一 测试演示参数 演示操作系统 Windows XP 不建议win7及以上操作系统使用 系统类型
  • 文件使用磁盘的实现--OS

    文件使用磁盘的实现 通过文件使用磁盘 代码如下 在fs read write c中 int sys write int fd const char buf int count fd为文件索引 buf为缓冲区 count表示要处理的字符串长度
  • 图的遍历(BFS和DFS)

    一 遍历 lt 1 gt 遍历 把所有元素都看一遍 每看到一个元素 针对条件进行处理 lt 2 gt 线性逻辑 顺序存储 void fun1 type data int num for int i 0 i lt num i 逐个处理 typ
  • QT 通信之 QByteArray

    QT上位机的串口通信发送和接收数据都需要用到QByteArray QByteArray存储的是char型字符 但QByteArray提供的数组操作 比char更方便 这篇文章主要讲一下QByteArray在实际应用中的一些函数 以及QBby
  • 机器学习5:评估器estimator

    要定义与tf estimator一起使用的自定义模型 需要使用tf estimator Estimator tf estimator LinearRegressor 线性回归实际上是一个tf estimator Estimator的子类 我
  • ASCII码对照表(十进制和十六进制)

    表 A 1 DEC 多国字符集 十六进制代码 MCS 字符或缩写 DEC 多国字符名 ASCII 控制字符 1 00 NUL 空字符 01 SOH 标题起始 Ctrl A 02 STX 文本起始 Ctrl B
  • CentOS下载ISO镜像的方法

    目录 一 CentOS 介绍 二 进入CentOS 官方网站 三 步骤 一 CentOS 介绍 CentOS 中文意思是社区企业操作系统是Linux发行版之一 是免费的 开源的 可以重新分发的开源操作系统 CentOS Linux发行版是一
  • JDK1.8新特性——lambda表达式和函数式接口

    一 lambda表达式 1 概念 Lambda表达式时一种特殊的匿名内部类 语法更加简洁 Lambda表达式允许把函数作为一个方法的参数 函数作为方法参数传递 将代码像数据一样传递 这里的匿名内部类的理解 我们可以在下述情况中来帮助大家了解
  • 服务器运行多个安卓系统,一台服务器可以做几个云手机

    一台服务器可以做几个云手机 内容精选 换一换 本文介绍使用云手机服务时需要了解的基本概念 云手机是一台包含原生安卓操作系统 具有虚拟手机功能的云服务器 简单来说 云手机 云服务器 Android OS 您可以远程实时控制云手机 实现安卓AP
  • linux 批量解压gz文件夹,linux 批量解压gz bz2文件

    一 批量解压bz2文件 find maxdepth 1 name bz2 xargs i tar xvjf 这条命令可解压当前目录下的所有bz2文件 批量解压是比较郁闷的事 以前尝试各种方法 甚至用脚本循环语句解压都不行 现在发现这条命令可
  • JSON对象转换成Byte(字节)数组

    2019独角兽企业重金招聘Python工程师标准 gt gt gt 如果你不了解JSON对象 请看这里 JSON对象转换成 byte 数组 Byte byteArray Byte jsonData bytes NSLog s byteArr
  • 如何追踪泄漏者信息?软件保护工具VMProtect独有水印快速锁定目标!

    VMProtect是一种很可靠的工具 可以保护应用程序代码免受分析和破解 但只有在应用程序内保护机制正确构建且没有可能破坏整个保护的严重错误的情况下 才能实现最好的效果 VMProtect提供了一种独特的功能 可以将有关受保护文件所有者的隐
  • 基于Python的微博大数据舆情分析,舆论情感分析可视化系统

    运行效果图 基于Python的微博大数据舆情分析 舆论情感分析可视化系统 系统介绍 微博舆情分析系统 项目后端分爬虫模块 数据分析模块 数据存储模块 业务逻辑模块组成 先后进行了数据获取和筛选存储 对存储后的数据库数据进行提取分析处理等操作
  • LeetCode 541. 反转字符串 II

    题目链接 https leetcode cn problems reverse string ii C 代码如下 class Solution public string reverseStr string s int k int n s
  • vant ui Swipe pc端滑动失效

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