From 794fd029a0c43cee72312e643a23fb7258bd738b Mon Sep 17 00:00:00 2001
From: neverland <chenjiahan@youzan.com>
Date: Sat, 23 Jul 2022 18:26:15 +0800
Subject: [PATCH] fix(Popover): allow to dynamically set offset prop (#10840)

---
 packages/vant/src/popover/Popover.tsx    | 46 +++++++++++++-----------
 packages/vant/src/popover/demo/index.vue | 13 ++++++-
 2 files changed, 37 insertions(+), 22 deletions(-)

diff --git a/packages/vant/src/popover/Popover.tsx b/packages/vant/src/popover/Popover.tsx
index 78b10d6d9..69369f652 100644
--- a/packages/vant/src/popover/Popover.tsx
+++ b/packages/vant/src/popover/Popover.tsx
@@ -93,25 +93,31 @@ export default defineComponent({
     const wrapperRef = ref<HTMLElement>();
     const popoverRef = ref<ComponentInstance>();
 
+    const getPopoverOptions = () => ({
+      placement: props.placement,
+      modifiers: [
+        {
+          name: 'computeStyles',
+          options: {
+            adaptive: false,
+            gpuAcceleration: false,
+          },
+        },
+        extend({}, offsetModifier, {
+          options: {
+            offset: props.offset,
+          },
+        }),
+      ],
+    });
+
     const createPopperInstance = () => {
       if (wrapperRef.value && popoverRef.value) {
-        return createPopper(wrapperRef.value, popoverRef.value.popupRef.value, {
-          placement: props.placement,
-          modifiers: [
-            {
-              name: 'computeStyles',
-              options: {
-                adaptive: false,
-                gpuAcceleration: false,
-              },
-            },
-            extend({}, offsetModifier, {
-              options: {
-                offset: props.offset,
-              },
-            }),
-          ],
-        });
+        return createPopper(
+          wrapperRef.value,
+          popoverRef.value.popupRef.value,
+          getPopoverOptions()
+        );
       }
       return null;
     };
@@ -125,9 +131,7 @@ export default defineComponent({
         if (!popper) {
           popper = createPopperInstance();
         } else {
-          popper.setOptions({
-            placement: props.placement,
-          });
+          popper.setOptions(getPopoverOptions());
         }
       });
     };
@@ -207,7 +211,7 @@ export default defineComponent({
       }
     });
 
-    watch(() => [props.show, props.placement], updateLocation);
+    watch(() => [props.show, props.offset, props.placement], updateLocation);
 
     useClickAway(wrapperRef, onClickAway, { eventName: 'touchstart' });
 
diff --git a/packages/vant/src/popover/demo/index.vue b/packages/vant/src/popover/demo/index.vue
index c91e9c1db..7b2606c49 100644
--- a/packages/vant/src/popover/demo/index.vue
+++ b/packages/vant/src/popover/demo/index.vue
@@ -85,6 +85,17 @@ const show = ref({
 const showPicker = ref(false);
 const currentPlacement = ref<PopoverPlacement>('top');
 
+const onClickChoosePlacement = () => {
+  showPicker.value = true;
+
+  setTimeout(() => {
+    show.value = {
+      ...show.value,
+      placement: true,
+    };
+  }, 300);
+};
+
 const onPickerChange = (value: PopoverPlacement) => {
   setTimeout(() => {
     show.value.placement = true;
@@ -129,7 +140,7 @@ const onSelect = (action: { text: string }) => Toast(action.text);
       readonly
       name="picker"
       :label="t('choosePlacement')"
-      @click="showPicker = true"
+      @click="onClickChoosePlacement"
     />
 
     <van-popup