fix: 修复popper的arrow位置计算问题

WeBankFinTech · Jan 21, 2022 · 4440d96 · 4440d96
1 parent 39c2c7b
commit 4440d96
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 4 deletions.
diff --git a/components/popper/popper.tsx b/components/popper/popper.tsx
@@ -122,7 +122,7 @@ export default defineComponent({
         const renderContentCopy = () => {
             if (visible.value && !transitionVisible.value) {
                 return contentStyle.value ? (
-                    <div style={contentStyle.value} />
+                    <div style={contentStyle.value} /> 
                 ) : (
                     <Content />
                 );

diff --git a/components/popper/usePopper.ts b/components/popper/usePopper.ts
@@ -29,6 +29,7 @@ export default (props: PopperProps, emit: any) => {
     const placement = ref(props.placement);
     const transitionVisible = ref(visible.value);
     watch(visible, (val) => {
+        // 关闭时直接关闭
         if (!val) {
             transitionVisible.value = val;
         }
@@ -37,9 +38,10 @@ export default (props: PopperProps, emit: any) => {
     let instance: ReturnType<typeof createPopper> | null;
 
     const updateInstance = () => {
-        transitionVisible.value = false;
-        instance.update().then(() => {
-            nextTick(() => {
+        // 需要在下一帧等copy渲染完毕，有大小体积之后再计算一次
+        nextTick(() => {
+            transitionVisible.value = false;
+            instance.update().then(() => {
                 transitionVisible.value = true;
             });
         });