vant组件库适配pc端

最新推荐文章于 2024-07-30 16:37:36 发布

敲代码的TKP

最新推荐文章于 2024-07-30 16:37:36 发布

阅读量4.7k

点赞数 5

分类专栏： vant_ui vue 文章标签：前端 javascript vue.js

TKP

本文链接：https://blog.csdn.net/TKP666/article/details/125974748

版权

vue 同时被 2 个专栏收录

47 篇文章 2 订阅

订阅专栏

vant_ui

6 篇文章 1 订阅

订阅专栏

本文介绍了在使用Vant组件库进行本地开发时遇到的van-search清除按钮在PC端失效的问题。官方解释是因为Vant主要针对移动端，只监听了touch事件。为了解决这个问题，可以引入@vant/touch-emulator模块，该模块能在桌面端将mouse事件转换为touch事件，使Vant组件在PC端正常工作。通过在main.js中简单引入该模块，即可实现PC端的模拟触控。

摘要由CSDN通过智能技术生成

今天遇到的一个问题就是：利用vant组件本地开发时，使用van-search发现清除按钮失效。官方解释是：Vant 是一个面向移动端的组件库，因此默认只适配了移动端设备，这意味着组件只监听了移动端的 touch 事件，没有监听桌面端的 mouse 事件。
如果你需要在桌面端使用 Vant，可以引入我们提供的 @vant/touch-emulator，这个库会在桌面端自动将 mouse 事件转换成对应的 touch 事件，使得组件能够在桌面端使用。

安装模块

npm i @vant/touch-emulator -S
//如果执行时报错如：npm 源文本中存在无法识别的标记。则使用单引号或者双引号包裹住依赖包的名字
npm i '@vant/touch-emulator' -S

引入模块后自动生效

//在main.js中引入
import '@vant/touch-emulator';

这样pc端就可以模拟触发手机端的事件了~

关注博主即可阅读全文

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

敲代码的TKP

关注关注

5
点赞
踩
10

收藏

觉得还不错? 一键收藏
1
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

vant - pc端适配(桌面端适配) 记录一下

King Saj

04-15

2735

需求: 页面在pc端打开,使得有些组件不能够在pc端使用. 例如: DatetimePicker组件,在pc端无法进行上下拖动操作的: 解决方案: 官网推荐安装模块 npm i @vant/touch-emulator -S 在main.js 引入模块后自动生效 // 引入模块后自动生效 import '@vant/touch-emulator'; ...

touchemulator：在桌面上模拟触摸输入

02-21

触控模拟器在桌面上模拟多点触控输入。触发触摸事件。按下shift键即可捏住并旋转！安装通过Bower从此存储库下载脚本： bower install hammer-touchemulator 或NPM： npm install hammer-touchemulator 如何使用包括javascript文件，并在使用触摸输入执行其他操作的任何其他库之前调用Emulator()函数。它将设置一些假属性来欺骗某些库的触摸检测，并在鼠标目标上触发touchstart ， touchmove和touchend事件。 < script src =" touch-emulator.js " > </ script > < script > TouchEmulator ( ) ; </ script > function log ( ev ) { console . log (

1 条评论您还未登录，请先登录后发表或查看评论

Vant 组件库适配桌面端（pc端）

最新发布

XIEMIN2030的博客

07-30

431

Vant 是一个面向移动端的组件库，因此默认只适配了移动端设备，这意味着组件只监听了移动端的。如果你需要在桌面端使用 Vant，可以引入我们提供的。企业微信自建应用在企业微信桌面端打开，事件，使得组件能够在桌面端使用。选择年月日无法进行上下拖动。事件，没有监听桌面端的。，这个库会在桌面端自动将。

vant组件库如何适配pc端

zhuyuan123456的博客

04-04

5156

背景因为最近做一个数据键盘和密码框的需求，找了半天，最合适的还是vant组件库中的PasswordInput 密码输入框和 NumberKeyboard 数字键盘，因此就选了这个，费了不少功夫才把组件的样式改成想要的样子，但是最后发现了一个比较尴尬的事情，那就是忘了vant适用于移动端设备，不支持鼠标事件。我想起了之前做cocos游戏的时候，改过类似的事件，然后就找，结果发现没找到合适的。后面就去vant的官网找了，果然有解决方案，因此在这里记录一下。 vant组件库适配PC（桌面）的解决方.

Vant组件库中的Search搜索框

m0_67402026的博客

03-01

3379

官方文档：https://vant-contrib.gitee.io/vant/#/zh-CN/search Tips: 在 van-search 外层增加 form 标签，且 action 不为空，即可在 iOS 输入法中显示搜索按钮。

针对vant遇到的BUG做记录

liudddsadsasa的博客

05-25

5867

问题：van-field标签使用clearable属性清除文本框内容时，内容console.log出来显示已经被清空，但是文本框的内容却依然还在。以下是出现问题的代码截图：下面是改完成功的代码截图：没错，问题出现在v-model里，和标签属性无关只要加上form.就会出现这个BUG 可能还有别的原因，总之目前写到form外面是解决了，这个框架的BUG还很多，我有时间就会记录到这里，大家如果有更好解法的话，可以在评论区畅所预言，欢迎大家指点！ ...

vue2+vant 适配PC端

qq_41169990的博客

02-02

1004

vue2+vant 桌面适配 van-swipe-cell 滑动阻止冒泡失效问题

详解如何搭建mpvue框架搭配vant组件库的小程序项目

01-03

Vant – 轻量、可靠的移动端 Vue 小程序组件库。由有赞公司开发与维护。提供了一系列美观、优质的移动端组件。vant 官网 2. 在普通小程序怎么使用 vant 组件使用之前使用 Vant Weapp 前，请确保你已经学习过...

Vant移动端组件库-其他

06-11

Vant 是一套轻量、可靠的移动端组件库。通过 Vant，可以快速搭建出风格统一的页面，提升开发效率。特性：1、60+ 高质量组件2、95% 单元测试覆盖率3、完善的中英文文档和示例4、支持按需引入5、支持主题定制6、支持...

Vant移动端组件库 v3.0.0

12-28

为您提供Vant移动端组件库下载，Vant 是一套轻量、可靠的移动端组件库。通过 Vant，可以快速搭建出风格统一的页面，提升开发效率。特性：1、60+ 高质量组件2、95% 单元测试覆盖率3、完善的中英文文档和示例4、支持按...

Vue3使用vant检索组件van-search的坑

qq_38948398的博客

01-30

2196

且清空按钮点击无效，层叠样式排版有问题，需重新使用样式更改位置偏移。

touch-emulator:https 的封装

06-21

触摸模拟器与 browserify 一起使用的的包装器。例子 require ( 'touch-emulator' ) ( ) ; 然后一个触摸事件 polyfills 将自动安装。请参阅demo/demo.js以了解更多用法。和牛人一起玩克隆到您的计算机。 git clone https://github.com/jacobbubu/touch-emulator.git touch-emulator cd touch-emulator npm install 然后使用以下命令运行demo.js ： npm start 在浏览器中打开localhost:9966 。

Vue3框架Vite引用vant组件方法及相关问题解决方法

qq_39111074的博客

03-19

3773

Vue3框架Vite引用vant组件方法及相关问题解决方法

解决clear方法失效

weixin_50228784的博客

05-21

998

全选并重新输入 #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') 刷新页面 ...

vue-7：组件库（移动端vant）（PC端element）

qq_60839348的博客

05-14

1035

vue-7：组件库（移动端vant）（PC端element）

微信input组件添加清除图标,点击清空不生效

MR.杜的博客

07-26

1825

中,因为微信小程序中input组件的层级在聚焦时会最高，会覆盖清空图标，所以点击不生效,在pc开发者工具中是不存在问题的。不要试图将清空图标放在input组件的上面，图标使用cover-view和cover-image组件也不可以。2.使用uview-UI中的input组件,修改input组件的深度样式,1.设置input的padding-right大于图标的宽度。微信小程序中使用input组件，点击上面的清空图标不生效问题。...

JavaScript 资源大全

jackie_bobo的博客

02-06

1845

JavaScript 资源大全中文版我想很多程序员应该记得 GitHub 上有一个 Awesome - XXX 系列的资源整理。awesome-javascript 是 sorrycc 发起维护的 JS 资源列表，内容包括：包管理器、加载器、测试框架、运行器、QA、MVC框架和库、模板引擎、数据可视化、时间轴、编辑器等等Awesome 系列虽然挺全，但基本只对收录的资源做了极为简要的介绍，如果有更详

vant组件库的SwipeCell组件无法拖动，无法滑动，无样式等问题

xiaobuzq的博客

01-20

1442

如果发现组件没有样式的话，在上方导入对应的样式就可以了，这里导入的是SwipeCell组件样式，同理，发现哪个组件没样式就导入哪个组件的样式就可以了。使用了vant组件库的SwipeCell组件发现无法滑动，如何把浏览器切换成移动端是可以滑动组件的。查阅了资料，发现是pc端和移动的监听事件是不同的，需要下载一个插件才能在pc端使用。打开终端进行安装，我使用的是pnpm包管理工具，按自己使用的包管理工具来安装。然后在pc端就可以拖动和滑动了，这个组件在pc端有点难拖动，多试几次就好了。

vue项目如何适配pc端、手机网页端

07-25

对于Vue项目的适配，可以通过以下方法来适配PC端和手机网页端： 1. 使用响应式布局：Vue项目可以使用CSS框架如Bootstrap或Element UI等来实现响应式布局。通过使用栅格系统和媒体查询，可以根据设备的屏幕大小自动调整布局和样式。 2. 使用Flexbox布局：Flexbox是一种弹性布局模型，可以轻松实现灵活的布局。通过在Vue组件的样式中使用Flexbox布局来适配不同设备的屏幕大小。 3. 使用Vue Router进行路由管理：Vue Router提供了路由管理功能，可以根据不同的路由配置加载不同的组件。可以根据设备类型（PC或移动设备）来加载不同的组件或页面。 4. 使用CSS媒体查询：使用CSS媒体查询可以根据设备的屏幕大小、分辨率等特性来应用不同的样式。可以在Vue组件的样式中使用媒体查询来适配不同设备的样式。 5. 使用Vue插件或库：有一些专门用于移动端适配的Vue插件或库，例如vant、vux等，它们提供了一些移动端常用的组件和样式，可以帮助快速适配移动端。需要注意的是，适配PC端和手机网页端时，除了布局和样式的适配，还需要考虑交互和用户体验的优化。可以根据具体需求，结合以上方法进行适配。