vant组件库如何适配pc端

背景

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

 

vant组件库适配PC（桌面）的解决方案：

Vant 是一个面向移动端的组件库，因此默认只适配了移动端设备，这意味着组件只监听了移动端的 touch 事件，没有监听桌面端的 mouse 事件。

 

如果你需要在桌面端使用 Vant，可以引入我们提供的 @vant/touch-emulator，这个库会在桌面端自动将 mouse 事件转换成对应的 touch 事件，使得组件能够在桌面端使用。

 

安装模块

 

npm i @vant/touch-emulator -S

 

// 引入模块后自动生效

 

import '@vant/touch-emulator';

 

总结

方法永远比问题多，找解决方案的时候，在时间允许的情况下，请多专研一下，然后总有适合的方法。 如果时间够的话，还是会研究一下用js转换鼠标事件。