From 235cfa1b5691712d3dff4e5ac3919da99f6d3d12 Mon Sep 17 00:00:00 2001
From: neverland <jait.chen@foxmail.com>
Date: Sat, 17 Jun 2023 21:25:50 +0800
Subject: [PATCH] fix(FloatingPanel): remove passive event warning (#11992)

---
 packages/vant/src/floating-panel/FloatingPanel.tsx | 6 ++++--
 packages/vant/src/floating-panel/README.md         | 2 +-
 packages/vant/src/floating-panel/README.zh-CN.md   | 2 +-
 packages/vant/src/floating-panel/demo/index.vue    | 2 +-
 4 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/packages/vant/src/floating-panel/FloatingPanel.tsx b/packages/vant/src/floating-panel/FloatingPanel.tsx
index 1d39faf3a..54a9c9fa8 100644
--- a/packages/vant/src/floating-panel/FloatingPanel.tsx
+++ b/packages/vant/src/floating-panel/FloatingPanel.tsx
@@ -16,7 +16,7 @@ import {
 } from '../utils';
 
 // Composables
-import { useWindowSize } from '@vant/use';
+import { useWindowSize, useEventListener } from '@vant/use';
 import { useLockScroll } from '../composables/use-lock-scroll';
 import { useTouch } from '../composables/use-touch';
 import { useSyncPropRef } from '../composables/use-sync-prop-ref';
@@ -142,13 +142,15 @@ export default defineComponent({
 
     useLockScroll(rootRef, () => true);
 
+    // useEventListener will set passive to `false` to eliminate the warning of Chrome
+    useEventListener('touchmove', onTouchmove, { target: rootRef });
+
     return () => (
       <div
         class={[bem(), { 'van-safe-area-bottom': props.safeAreaInsetBottom }]}
         ref={rootRef}
         style={rootStyle.value}
         onTouchstartPassive={onTouchstart}
-        onTouchmove={onTouchmove}
         onTouchend={onTouchend}
         onTouchcancel={onTouchend}
       >
diff --git a/packages/vant/src/floating-panel/README.md b/packages/vant/src/floating-panel/README.md
index 6d60f30d0..05fbf6925 100644
--- a/packages/vant/src/floating-panel/README.md
+++ b/packages/vant/src/floating-panel/README.md
@@ -44,7 +44,7 @@ For example, you can make the panel stop at three positions: `100px`, 40% of the
 ```html
 <van-floating-panel v-model:height="height" :anchors="anchors">
   <div style="text-align: center; padding: 15px">
-    <p>Panel Show Height {{ height }} px</p>
+    <p>Panel Show Height {{ height.toFixed(0) }} px</p>
   </div>
 </van-floating-panel>
 ```
diff --git a/packages/vant/src/floating-panel/README.zh-CN.md b/packages/vant/src/floating-panel/README.zh-CN.md
index 489b5c56e..f3e56ec32 100644
--- a/packages/vant/src/floating-panel/README.zh-CN.md
+++ b/packages/vant/src/floating-panel/README.zh-CN.md
@@ -44,7 +44,7 @@ FloatingPanel 的默认高度为 `100px`，用户可以拖动来展开面板，
 ```html
 <van-floating-panel v-model:height="height" :anchors="anchors">
   <div style="text-align: center; padding: 15px">
-    <p>面板显示高度 {{ height }} px</p>
+    <p>面板显示高度 {{ height.toFixed(0) }} px</p>
   </div>
 </van-floating-panel>
 ```
diff --git a/packages/vant/src/floating-panel/demo/index.vue b/packages/vant/src/floating-panel/demo/index.vue
index d341c5794..40b025456 100644
--- a/packages/vant/src/floating-panel/demo/index.vue
+++ b/packages/vant/src/floating-panel/demo/index.vue
@@ -52,7 +52,7 @@ const height = ref(anchors[0]);
     <van-tab :title="t('customAnchors')">
       <van-floating-panel v-model:height="height" :anchors="anchors">
         <div style="text-align: center; padding: 15px">
-          <p>{{ t('panelShowHeight') }} {{ height }} px</p>
+          <p>{{ t('panelShowHeight') }} {{ height.toFixed(0) }} px</p>
         </div>
       </van-floating-panel>
     </van-tab>