问题合集更更更之vant组件适配桌面端

前言

👏问题合集更更更之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>

pc端使用@vant/touch-emulator延伸的其他问题

在全局引入之后，发现项目中的某一块代码的点击事件失效了，无法触发，第一反应定位到该库上，遂去翻阅文档，发现有解决方案。

禁用 touch 模拟

在标签上添加 data-no-touch-simulate 属性后，可以使这个标签（以及它的子元素）不触发 touch 模拟事件。

<div data-no-touch-simulate />

5.写在最后🍒

看完本文如果觉得对你有一丢丢帮助，记得点赞+关注+收藏鸭 🍕

更多相关内容，关注🍥苏苏的bug，🍡苏苏的github，🍪苏苏的码云~