bug: 使用dumi-theme-mobile引入ant-mobile-v5的Picker组件不能拖动

[damonyoungcc]

Versions

• dumi: 1.1.38
• dumi-theme-mobile: 1.1.21
• @umijs/plugin-antd-mobile: 1.2.0
• ant-mobile-v5: 5.0.0-rc.15
• node: v16.13.1
• npm: 8.1.2
• OS: Mac OS
• Browser: Microsoft Edge

Steps to reproduce

1. 使用dumi搭建了一个移动端React组件的开发环境，想要根据ant-mobile V5 的做一些二次封装，引入了Picker组件，鼠标不能拖动Picker的选项。
2. 复现地址： https://yangdepp.github.io/ant-design-plus/components/antd-design-mobile/foo
3. 我把node_modules里面已经编译好的dumi-theme-mobile的主题放在本地，发现只要注释下面的代码就可以恢复正常
   theme-mobile/src/layouts/demo.tsx第30行

    // 注释下面的内容就可以恢复正常
    if (target.current) {
      TouchEmulator(target.current);
    }

[PeachScript]

cc @xiaohuoni

[damonyoungcc]

单独打开这个例子，在PC的浏览器上，调成移动端的模拟器就可以正常拖动，初步分析应该是引入的f2-touchemulator这个库在PC上模拟移动端触摸事件有些问题。

[zzzgydi]

dumi-theme-mobile这个包里使用f2-touchemulator模拟touch事件，仅在这个div下面生效，（以下dumi-theme-mobile源码截图）

然后 antd-mobile 的 Picker 是append在body后面的，不在上面的div里，所以在Picker里并不会出现模拟的touch事件。（以下复现demo截图）

然而，f2-touchemulator 模拟touch事件会在window里设置touch相关事件为null，（以下f2-touchemulator源码截图）

然后，antd-mobile 默认采用touch事件，（以下antd-mobile源码截图）

然后，use-gesture这个库（antd-mobile使用的手势库）会判断是否支持touch事件（以下use-gesture源码截图）
，否则将默认使用pointer事件（这个印象中是这样，没有再翻源码）

综上，我猜测原因应该是，f2-touchemulator “欺骗”了 use-gesture，然而dumi-theme-mobile又没有派发touch到body。所以出现在pc端加了这个库picker使用不了，注释掉就能使用（使用pointer事件），移动端能使用（本来就支持touch事件）。

[xiaohuoni]

本来就是用来做pc上模拟touch事件的

[xiaohuoni]

原因没这么复杂，就是 picker 的弹窗是直接挂载在 body 上的，这个监听只绑定到指定 dom 下面。

[xiaohuoni]

@yangdepp 代码合并的时候，让ci关闭比较好。万一修复的代码，没合并，这个就不算解决。