前言
👏问题合集更更更之vant组件适配桌面端~
🥇记得点赞+关注+收藏！
1.问题描述
在pc端（桌面端）使用vant组件时，清除按钮不生效？除此之外，下拉框等滑动事件也无法正确触发。
注：f12切换到移动端展示才能正确清除
2.问题原因
参考vant官方文档描述：
清除按钮监听是的移动端 Touch 事件，参见桌面端适配。
vant 是一个面向移动端的组件库，因此默认只适配了移动端设备，这意味着组件只监听了移动端的 touch 事件，没有监听桌面端的 mouse 事件。
如果你需要在桌面端使用 Vant，可以引入 @vant/touch-emulator，这个库会在桌面端自动将 mouse 事件转换成对应的 touch 事件，使得组件能够在桌面端使用。
3.使用步骤
//安装模块
npm i @vant/touch-emulator -S
// 引入模块后自动生效
import '@vant/touch-emulator';
引入之后，运行项目，即可正确清空，除了清空事件，下拉框等组件滑动事件也能正确反馈。
4.Vant Touch Emulator了解
github地址:
https://github.com/youzan/vant/tree/main/packages/vant-touch-emulator
在桌面端上模拟移动端 touch 事件，实现方式来自于 hammerjs/touchemulator.
安装方式
# with npm
npm i @vant/touch-emulator# with yarn
yarn add @vant/touch-emulator# with pnpm
pnpm add @vant/touch-emulator# with Bun
bun add @vant/touch-emulator
使用指南
直接在代码中引入模块即可，模块会自动完成初始化并生效
import '@vant/touch-emulator';
或者CDN 引入
<script src="https://fastly.jsdelivr.net/npm/@vant/touch-emulator"></script>
vanttouchemulator_80">pc端使用@vant/touch-emulator延伸的其他问题
在全局引入之后，发现项目中的某一块代码的点击事件失效了，无法触发，第一反应定位到该库上，遂去翻阅文档，发现有解决方案。
禁用 touch 模拟
在标签上添加 data-no-touch-simulate 属性后，可以使这个标签（以及它的子元素）不触发 touch 模拟事件。
<div data-no-touch-simulate />
