解决vant组件在桌面端clear事件失效问题

已于 2024-03-27 11:16:17 修改
阅读量650 收藏
点赞数 3
分类专栏： Js 文章标签： 前端 javascript 开发语言
于 2024-03-27 10:52:30 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_44063746/article/details/137070701
版权
本文介绍了Vant组件库如何在设计时仅针对移动端，通过引入@vant/touch-emulator模块，将桌面端的mouse事件转换为touch事件，以便在桌面环境下兼容使用。该方法适用于Vant^2.12.45版本。
摘要由CSDN通过智能技术生成

Vant 是一个移动端的组件库，只适配了移动端设备，组件只监听了移动端的 touch 事件，没有监听桌面端的 mouse 事件, 解决办法:引入@vant/touch-emulator，这自动将 mouse 事件转换成对应的 touch 事件，使得组件能够在桌面端使用

注意:“vant”: "^2.12.45"生效, 其他版本不清楚

npm i @vant/touch-emulator -S

//在main.js中引入
import '@vant/touch-emulator';
咸鱼起码是条鱼
关注
专栏目录
vant - pc端适配(桌面端适配) 记录一下
King Saj
04-15 2812
需求: 页面在pc端打开,使得有些组件不能够在pc端使用. 例如: DatetimePicker组件,在pc端无法进行上下拖动操作的: 解决方案: 官网推荐 安装模块 npm i @vant/touch-emulator -S 在main.js 引入模块后自动生效 // 引入模块后自动生效 import '@vant/touch-emulator'; ...
vue vantUI tab切换时 list组件不触发load事件的问题及解决方法
10-15
本文针对VantUI的Tab切换时List组件不触发load事件的问题进行讨论，并提出了具体的解决方案。 首先，问题的背景是这样的：在使用VantUI组件库时，开发人员可能会利用List组件的load事件来实现瀑布流式的滚动加载...
解决clear方法失效
weixin_50228784的博客
05-21 1023
全选并重新输入 #coding= utf-8 from selenium.webdriver.common.keys import Keys # 导入'ctrl + a'全选 driver.find_element_by_id('kw').send_keys(Keys.CONTROL, 'a') time.sleep(2) #重新输入 driver.find_element_by_id('kw').send_keys('cc') 刷新页面 ...
问题合集更更更之vant组件适配桌面端
最新发布
苏苏就是小苏苏的博客
09-02 527
👏问题合集更更更之vant组件适配桌面端~🥇苏苏的bug
解决ie11下antd-vue input的clear点击无效
qq_59106291的博客
07-14 981
解决ie11下antd-vue input的clear点击无效（兼容问题）
vant pc端 swipe 组件 鼠标滑动失效或者异常
qq_38233172的博客
05-16 548
dragstart.prevent 阻止pc 端默认的拖动事件，利用@vant/touch-emulator将鼠标事件转换成touch事件。全局引入import "@vant/touch-emulator";之后，在pc端鼠标拖动达不到 移动端的效果需要增加。
vant组件库适配pc端
07-25 4835
Vant 是一个面向移动端的组件库，因此默认只适配了移动端设备，这意味着组件只监听了移动端的 touch 事件，没有监听桌面端的 mouse 事件。 如果你需要在桌面端使用 Vant，可以引入我们提供的 @vant/touch-emulator，这个库会在桌面端自动将 mouse 事件转换成对应的 touch 事件，使得组件能够在桌面端使用。...
vant组件中 dialog的确认按钮的回调事件操作
01-22
不知道是不是我理解有问题，看了vant的组件库，他的文档是这样说的 然后我就绑定了事件 ：confirm 结果他的触发机制是：加载页面时会触发，点击按钮打开模态框时会触发，点击确定会触发，点击取消也会触发。 经过...
小程序引入vant组件（已解决）
01-03
写在之前：首先要看小程序是否有package.json文件，有的话可以往下走，没有的话，需要先执行npm init写入package.json文件 第一步：npm i vant-weapp -S --production ，接着点击工具的构建npm 第二步： 我找到方法...
vant组件小程序版 适用小程序
09-01
标题中的“vant组件小程序版”指的是Vant WeApp，它是Vant UI框架的小程序适配版本，允许开发者在微信小程序以及其他支持Vue.js语法的小程序平台上使用Vant的组件。这使得开发者可以利用Vant的丰富组件库，如按钮、...
使用Vant完成通知栏Notify的提示操作
01-18
效果： 代码展示： <template> <!-- 通知消息提示 --> <div id=notify> <van type=primary click=toNotify class=btn>顶部通知</van> </div> </template> [removed] export default{ data(){ return{ msg:'' } }, methods:{ toNotify(){ this.$notify({ message:'我是提示的notify', backgroun
iview组件，input输入框的clearable属性失效原因
qq_37291367的博客
04-24 5352
本来写了一个文本域，支持一键清除；所以直接用了iview中Input组件自带的属性clearable，结果无效，那个小叉叉怎么都不出来…… 试了半天才发现原来是因为 type=“textarea” 会和 clearable属性冲突…… <template> <Input v-model="value1" clearable style="width: 200px" /> <br> <br> <Input type=
vant组件库如何适配pc端
zhuyuan123456的博客
04-04 5219
背景 因为最近做一个数据键盘和密码框的需求，找了半天，最合适的还是vant组件库中的PasswordInput 密码输入框 和 NumberKeyboard 数字键盘，因此就选了这个，费了不少功夫才把组件的样式改成想要的样子，但是最后发现了一个比较尴尬的事情，那就是忘了vant适用于移动端设备，不支持鼠标事件。我想起了之前做cocos游戏的时候，改过类似的事件，然后就找，结果发现没找到合适的。 后面就去vant的官网找了，果然有解决方案，因此在这里记录一下。 vant组件库适配PC（桌面）的解决方.
搜索框---解决ios（苹果）无法触发search方法
qq_46302247的博客
04-14 2454
安卓手机的软键盘，默认有“搜索”按钮，可以触发search方法； ios(苹果)手机的软键盘，默认没有“搜索”按钮（用“换行”按钮代替了），所以无法触发search方法； 如果想让 ios(苹果)手机触发search方法,解决办法如下： // 在 van-search 外面套一个form，并且有 action="" <form action=""> <van-search /> </form> 加上 form 后，ios(苹果)手机的软键盘，就可以显示“搜索”按钮
使用 vant 的时候 #icon=““ 缩写插槽使用失效的解决办法。
KLW75
09-07 2777
使用vant 组件的时候，有可能会碰到#icon=""，这样的形式，这是vue中插槽的缩写形式。 <template #icon="props"> </template> 这样的写法失效的话。 很大的可能是引入的 vue 版本与 vant 的版本过低。 解决办法，使用最新版的 vant 和vue 的版本 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vant@2.10/lib/index.cs.
vue2+vant 适配PC端
qq_41169990的博客
02-02 1026
vue2+vant 桌面适配 van-swipe-cell 滑动阻止冒泡失效问题
PC端轮播图支持手动滑动
qq_39652099的博客
06-26 622
PC端轮播图支持手动滑动/鼠标拖动，且可以左右切换。：最开始用的是elementUI的Carousel组件，不支持手动滑动/鼠标拖动，然后改成了Vant的Swipe组件，加上左右箭头，调用Swipe 方法prev()、next()：由于vant是移动端的组件库，对pc端会有兼容性问题，例如Swipe，移动端是@touch，该组件做了相应的监听，而PC端是@mouse，没有做对应的监听，因此在pc端无法用鼠标拖动图片。终端输入npm i @vant/touch-emulator --save然后在。
vant，popover点击外面无法关闭？
qq_42555422的博客
11-16 1434
根据上面这个issue知道。因为vant基本还是用于移动的，所以事件都是touch的，click就触发不了了。最近在使用vant2.0，但是是在pc端使用。发现popover怎么都无法点击外面关闭。也就是close-on-click-outside属性。解决方法安装@vant/touch-emulator。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

咸鱼起码是条鱼

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值