From 1bbaaed1fdf6d579830e52ffae34ca3ea5c77b30 Mon Sep 17 00:00:00 2001
From: Eiinu <eiinu@qq.com>
Date: Sun, 4 Feb 2024 16:25:14 +0800
Subject: [PATCH] refactor: popover (#2913)

---
 .../src/exhibition/pages/popover/index.vue    |   2 +-
 .../src/exhibition/pages/popover/option.vue   |   2 +-
 .../src/exhibition/pages/popover/position.vue |  40 ++-
 .../src/exhibition/pages/tour/index.vue       |   2 +-
 .../__VUE/popover/__tests__/popover.spec.ts   |  77 ------
 .../__VUE/popover/__tests__/popover.spec.tsx  | 154 ++++++++++++
 src/packages/__VUE/popover/demo/index.vue     |   2 +-
 src/packages/__VUE/popover/demo/position.vue  |  40 ++-
 src/packages/__VUE/popover/index.scss         |  15 +-
 src/packages/__VUE/popover/index.taro.vue     | 236 ++++++++----------
 src/packages/__VUE/popover/index.vue          | 158 ++++++------
 src/packages/__VUE/popover/type.ts            |   8 +
 .../__VUE/tour/__tests__/tour.spec.ts         | 152 -----------
 .../__VUE/tour/__tests__/tour.spec.tsx        | 152 +++++++++++
 src/packages/__VUE/tour/demo/index.vue        |   2 +-
 15 files changed, 542 insertions(+), 500 deletions(-)
 delete mode 100644 src/packages/__VUE/popover/__tests__/popover.spec.ts
 create mode 100644 src/packages/__VUE/popover/__tests__/popover.spec.tsx
 delete mode 100644 src/packages/__VUE/tour/__tests__/tour.spec.ts
 create mode 100644 src/packages/__VUE/tour/__tests__/tour.spec.tsx

diff --git a/packages/nutui-taro-demo/src/exhibition/pages/popover/index.vue b/packages/nutui-taro-demo/src/exhibition/pages/popover/index.vue
index 93e4062953..cf523210bb 100644
--- a/packages/nutui-taro-demo/src/exhibition/pages/popover/index.vue
+++ b/packages/nutui-taro-demo/src/exhibition/pages/popover/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <Demo>
+  <Demo style="padding-bottom: 200px">
     <h2>{{ t('basic') }}</h2>
     <Basic />
 
diff --git a/packages/nutui-taro-demo/src/exhibition/pages/popover/option.vue b/packages/nutui-taro-demo/src/exhibition/pages/popover/option.vue
index bac730ee87..119db2e137 100644
--- a/packages/nutui-taro-demo/src/exhibition/pages/popover/option.vue
+++ b/packages/nutui-taro-demo/src/exhibition/pages/popover/option.vue
@@ -15,7 +15,7 @@
 
 <script setup lang="ts">
 import { ref, shallowRef, h } from 'vue';
-import { Location, Cart2, My2 } from '@nutui/icons-vue';
+import { Location, Cart2, My2 } from '@nutui/icons-vue-taro';
 const show1 = ref(false);
 const show2 = ref(false);
 const list1 = ref([
diff --git a/packages/nutui-taro-demo/src/exhibition/pages/popover/position.vue b/packages/nutui-taro-demo/src/exhibition/pages/popover/position.vue
index 636504c4bb..537e76eeea 100644
--- a/packages/nutui-taro-demo/src/exhibition/pages/popover/position.vue
+++ b/packages/nutui-taro-demo/src/exhibition/pages/popover/position.vue
@@ -1,9 +1,9 @@
 <template>
   <nut-cell title="Position" @click="handlePicker"></nut-cell>
-  <nut-popup v-model:visible="showPopup" position="bottom">
-    <nut-picker :columns="columns" @change="change" @confirm="close" @close="close">
+  <nut-popup v-model:visible="showPopup" position="bottom" @opened="handleOpened">
+    <nut-picker :columns="columns" @change="change" @confirm="close" @cancel="close">
       <template #top>
-        <div class="brickBox">
+        <div class="brick-box">
           <div id="popover-target" class="brick"></div>
         </div>
       </template>
@@ -11,21 +11,20 @@
   </nut-popup>
 
   <nut-popover
-    v-model:visible="customPositon"
+    v-model:visible="showPopover"
     target-id="popover-target"
     :location="curPostion"
     theme="dark"
     :list="positionList"
-  >
-  </nut-popover>
+  />
 </template>
 
 <script setup>
-import { reactive, ref } from 'vue';
+import { ref } from 'vue';
 const showPopup = ref(false);
-const customPositon = ref(false);
+const showPopover = ref(false);
 const curPostion = ref('top');
-const positionList = reactive([
+const positionList = ref([
   {
     name: 'option1'
   },
@@ -34,20 +33,21 @@ const positionList = reactive([
   }
 ]);
 const close = () => {
-  customPositon.value = false;
+  showPopover.value = false;
   showPopup.value = false;
 };
 
 const change = ({ selectedValue }) => {
   curPostion.value = selectedValue[0];
-  if (showPopup.value) customPositon.value = true;
+  if (showPopup.value) showPopover.value = true;
 };
 
 const handlePicker = () => {
   showPopup.value = true;
-  setTimeout(() => {
-    customPositon.value = true;
-  }, 0);
+};
+
+const handleOpened = () => {
+  showPopover.value = true;
 };
 
 const columns = ref([
@@ -67,7 +67,11 @@ const columns = ref([
 </script>
 
 <style>
-.brickBox {
+.nut-popover-content {
+  width: 100px;
+}
+
+.brick-box {
   margin: 80px 0;
   display: flex;
   justify-content: center;
@@ -79,9 +83,3 @@ const columns = ref([
   border-radius: 10px;
 }
 </style>
-
-<style>
-.nut-popover-content {
-  width: 100px;
-}
-</style>
diff --git a/packages/nutui-taro-demo/src/exhibition/pages/tour/index.vue b/packages/nutui-taro-demo/src/exhibition/pages/tour/index.vue
index 171671a183..dc75cf1ee0 100644
--- a/packages/nutui-taro-demo/src/exhibition/pages/tour/index.vue
+++ b/packages/nutui-taro-demo/src/exhibition/pages/tour/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <Demo>
+  <Demo style="padding-bottom: 50px">
     <h2>{{ t('basic') }}</h2>
     <Basic />
 
diff --git a/src/packages/__VUE/popover/__tests__/popover.spec.ts b/src/packages/__VUE/popover/__tests__/popover.spec.ts
deleted file mode 100644
index d5cb486cdb..0000000000
--- a/src/packages/__VUE/popover/__tests__/popover.spec.ts
+++ /dev/null
@@ -1,77 +0,0 @@
-import { mount } from '@vue/test-utils';
-import Popover from '../index.vue';
-import { nextTick, reactive } from 'vue';
-
-const iconItemList = [{ name: 'option1' }, { name: 'option2' }, { name: 'option3' }];
-
-const listDisabled = reactive([
-  { name: 'option1', disabled: true },
-  { name: 'option2', disabled: true },
-  { name: 'option3' }
-]);
-
-test('first render', async () => {
-  const wrapper = mount(Popover, {
-    props: {
-      visible: true,
-      list: iconItemList
-    }
-  });
-  await nextTick();
-  expect(wrapper.find('.nut-popover-menu-item').exists()).toBeTruthy();
-});
-
-test('Props theme dark', async () => {
-  const wrapper = mount(Popover, {
-    props: {
-      visible: true,
-      list: iconItemList,
-      theme: 'dark'
-    }
-  });
-  await nextTick();
-  expect(wrapper.find('.nut-popover--dark').exists()).toBeTruthy();
-});
-
-test('should not emit select event when the action is disabled', async () => {
-  const wrapper = mount(Popover, {
-    props: {
-      visible: true,
-      list: listDisabled
-    }
-  });
-  await nextTick();
-  expect(wrapper.findAll('.nut-popover-menu-disabled').length).toEqual(2);
-
-  wrapper.find('.nut-popover-menu-item').trigger('click');
-  expect(wrapper.emitted('choose')).toBeFalsy();
-});
-
-test('should close popover when clicking the action', async () => {
-  const wrapper = mount(Popover, {
-    props: {
-      visible: true,
-      list: iconItemList
-    }
-  });
-  await nextTick();
-
-  await wrapper.find('.nut-popover-menu-item').trigger('click');
-  expect(wrapper.emitted('update:visible')![0]).toEqual([false]);
-
-  await wrapper.setProps({ closeOnClickAction: false });
-  await wrapper.find('.nut-popover-menu-item').trigger('click');
-  expect(wrapper.emitted('update:visible')).toHaveLength(1);
-});
-
-test('Set Props Position', async () => {
-  const wrapper = mount(Popover, {
-    props: {
-      visible: true,
-      list: iconItemList,
-      location: 'top-start'
-    }
-  });
-  await nextTick();
-  expect(wrapper.find('.nut-popover-arrow--top-start').exists()).toBeTruthy();
-});
diff --git a/src/packages/__VUE/popover/__tests__/popover.spec.tsx b/src/packages/__VUE/popover/__tests__/popover.spec.tsx
new file mode 100644
index 0000000000..973422e309
--- /dev/null
+++ b/src/packages/__VUE/popover/__tests__/popover.spec.tsx
@@ -0,0 +1,154 @@
+import { mount } from '@vue/test-utils';
+import Popover from '../index.vue';
+import { ref, nextTick } from 'vue';
+import { sleep } from '@/packages/utils/unit';
+
+const list = [{ name: 'option1' }, { name: 'option2' }, { name: 'option3' }];
+
+const listDisabled = [{ name: 'option1', disabled: true }, { name: 'option2', disabled: true }, { name: 'option3' }];
+
+test('Popover: first render', async () => {
+  const wrapper = mount(
+    () => {
+      return <Popover visible={true} list={list} />;
+    },
+    {
+      global: {
+        stubs: {
+          teleport: true
+        }
+      }
+    }
+  );
+  expect(wrapper.find('.nut-popover-menu-item').exists()).toBeTruthy();
+});
+
+test('Popover: theme=dark', async () => {
+  const wrapper = mount(
+    () => {
+      return <Popover visible={true} list={list} theme="dark" />;
+    },
+    {
+      global: {
+        stubs: {
+          teleport: true
+        }
+      }
+    }
+  );
+  expect(wrapper.find('.nut-popover--dark').exists()).toBeTruthy();
+});
+
+test('Popover: disabled', async () => {
+  const wrapper = mount(
+    () => {
+      return <Popover visible={true} list={listDisabled} theme="dark" />;
+    },
+    {
+      global: {
+        stubs: {
+          teleport: true
+        }
+      }
+    }
+  );
+  expect(wrapper.findAll('.nut-popover-menu-disabled').length).toEqual(2);
+
+  wrapper.find('.nut-popover-menu-item').trigger('click');
+  expect(wrapper.emitted('choose')).toBeFalsy();
+});
+
+test('Popover: should close popover when clicking the action', async () => {
+  const show = ref(true);
+  const close = ref(true);
+  const wrapper = mount(
+    () => {
+      return <Popover v-model:visible={show.value} list={list} closeOnClickAction={close.value} />;
+    },
+    {
+      global: {
+        stubs: {
+          teleport: true
+        }
+      }
+    }
+  );
+  const items = wrapper.findAll('.nut-popover-menu-item');
+  await items[0].trigger('click');
+  expect(show.value).toEqual(false);
+
+  show.value = true;
+  close.value = false;
+  await nextTick();
+  expect(show.value).toEqual(true);
+  const item = wrapper.find('.nut-popover-menu-item');
+  await item.trigger('click');
+  expect(show.value).toEqual(true);
+});
+
+test('Popover: position=top-start', async () => {
+  const wrapper = mount(
+    () => {
+      return <Popover visible={true} list={list} location="top-start" />;
+    },
+    {
+      global: {
+        stubs: {
+          teleport: true
+        }
+      }
+    }
+  );
+  expect(wrapper.find('.nut-popover-arrow--top-start').exists()).toBeTruthy();
+});
+
+test('Popover: position=left-end', async () => {
+  const wrapper = mount(
+    () => {
+      return <Popover visible={true} list={list} location="left-end" />;
+    },
+    {
+      global: {
+        stubs: {
+          teleport: true
+        }
+      }
+    }
+  );
+  expect(wrapper.find('.nut-popover-arrow--left-end').exists()).toBeTruthy();
+});
+
+test('Popover: target', async () => {
+  const p = document.createElement('div');
+  p.id = 'popover-target';
+  p.getBoundingClientRect = vi.fn(() => {
+    return {
+      width: 300,
+      height: 100,
+      left: 0,
+      top: 0,
+      right: 300
+    } as DOMRect;
+  });
+  document.body.appendChild(p);
+  const show = ref(false);
+  const wrapper = mount(
+    () => {
+      return (
+        <Popover v-model:visible={show.value} duration={0} targetId="popover-target" list={list} arrowOffset={16} />
+      );
+    },
+    {
+      global: {
+        stubs: {
+          teleport: true
+        }
+      }
+    }
+  );
+  show.value = true;
+  await sleep(200);
+  const popoverWrapper = wrapper.find('.nut-popover');
+  expect(popoverWrapper.attributes('style')).contain('top: 112px;');
+  expect(popoverWrapper.attributes('style')).contain('left: 150px;');
+});
diff --git a/src/packages/__VUE/popover/demo/index.vue b/src/packages/__VUE/popover/demo/index.vue
index 0e26e69b5f..19b4e19242 100644
--- a/src/packages/__VUE/popover/demo/index.vue
+++ b/src/packages/__VUE/popover/demo/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <Demo>
+  <Demo style="padding-bottom: 200px">
     <h2>{{ t('basic') }}</h2>
     <Basic />
 
diff --git a/src/packages/__VUE/popover/demo/position.vue b/src/packages/__VUE/popover/demo/position.vue
index 636504c4bb..537e76eeea 100644
--- a/src/packages/__VUE/popover/demo/position.vue
+++ b/src/packages/__VUE/popover/demo/position.vue
@@ -1,9 +1,9 @@
 <template>
   <nut-cell title="Position" @click="handlePicker"></nut-cell>
-  <nut-popup v-model:visible="showPopup" position="bottom">
-    <nut-picker :columns="columns" @change="change" @confirm="close" @close="close">
+  <nut-popup v-model:visible="showPopup" position="bottom" @opened="handleOpened">
+    <nut-picker :columns="columns" @change="change" @confirm="close" @cancel="close">
       <template #top>
-        <div class="brickBox">
+        <div class="brick-box">
           <div id="popover-target" class="brick"></div>
         </div>
       </template>
@@ -11,21 +11,20 @@
   </nut-popup>
 
   <nut-popover
-    v-model:visible="customPositon"
+    v-model:visible="showPopover"
     target-id="popover-target"
     :location="curPostion"
     theme="dark"
     :list="positionList"
-  >
-  </nut-popover>
+  />
 </template>
 
 <script setup>
-import { reactive, ref } from 'vue';
+import { ref } from 'vue';
 const showPopup = ref(false);
-const customPositon = ref(false);
+const showPopover = ref(false);
 const curPostion = ref('top');
-const positionList = reactive([
+const positionList = ref([
   {
     name: 'option1'
   },
@@ -34,20 +33,21 @@ const positionList = reactive([
   }
 ]);
 const close = () => {
-  customPositon.value = false;
+  showPopover.value = false;
   showPopup.value = false;
 };
 
 const change = ({ selectedValue }) => {
   curPostion.value = selectedValue[0];
-  if (showPopup.value) customPositon.value = true;
+  if (showPopup.value) showPopover.value = true;
 };
 
 const handlePicker = () => {
   showPopup.value = true;
-  setTimeout(() => {
-    customPositon.value = true;
-  }, 0);
+};
+
+const handleOpened = () => {
+  showPopover.value = true;
 };
 
 const columns = ref([
@@ -67,7 +67,11 @@ const columns = ref([
 </script>
 
 <style>
-.brickBox {
+.nut-popover-content {
+  width: 100px;
+}
+
+.brick-box {
   margin: 80px 0;
   display: flex;
   justify-content: center;
@@ -79,9 +83,3 @@ const columns = ref([
   border-radius: 10px;
 }
 </style>
-
-<style>
-.nut-popover-content {
-  width: 100px;
-}
-</style>
diff --git a/src/packages/__VUE/popover/index.scss b/src/packages/__VUE/popover/index.scss
index 119b81284e..233d6059ec 100644
--- a/src/packages/__VUE/popover/index.scss
+++ b/src/packages/__VUE/popover/index.scss
@@ -109,8 +109,8 @@
     }
 
     .nut-popover-menu-item {
-      display: block;
-      // padding-bottom: 8px;
+      display: flex;
+      align-items: center;
       padding: 8px;
       border-bottom: 1px solid $popover-border-bottom-color;
 
@@ -130,6 +130,7 @@
 
       .nut-popover-menu-item-name {
         width: 100%;
+        text-align: center;
         word-break: keep-all;
       }
 
@@ -137,10 +138,6 @@
         color: $popover-disable-color;
         cursor: not-allowed;
       }
-
-      &.nut-popover-menu-taroitem {
-        display: flex;
-      }
     }
 
     &--top {
@@ -256,9 +253,3 @@
 .nut-popover-wrapper {
   display: inline-block;
 }
-
-// Taro
-.nut-popover-content-copy {
-  position: absolute;
-  top: -99999px;
-}
diff --git a/src/packages/__VUE/popover/index.taro.vue b/src/packages/__VUE/popover/index.taro.vue
index 20ecbb91da..724e218624 100644
--- a/src/packages/__VUE/popover/index.taro.vue
+++ b/src/packages/__VUE/popover/index.taro.vue
@@ -7,11 +7,11 @@
     @click="openPopover"
     ><slot name="reference"></slot
   ></view>
-  <view ref="popoverbox" :class="['nut-popover', `nut-popover--${theme}`, `${customClass}`]" :style="popoverstyles">
+  <view :class="['nut-popover', `nut-popover--${theme}`, `${customClass}`]" :style="getRootPosition">
     <nut-popup
       v-model:visible="showPopup"
       :pop-class="`nut-popover-content nut-popover-content--${location}`"
-      :style="customStyle"
+      :style="{ background: bgColor }"
       position=""
       transition="nut-popover"
       :overlay="overlay"
@@ -26,12 +26,7 @@
         <view
           v-for="(item, index) in list"
           :key="index"
-          :class="[
-            item.className,
-            item.disabled && 'nut-popover-menu-disabled',
-            'nut-popover-menu-item',
-            'nut-popover-menu-taroitem'
-          ]"
+          :class="[item.className, item.disabled && 'nut-popover-menu-disabled', 'nut-popover-menu-item']"
           @click.stop="chooseItem(item, index)"
         >
           <component :is="renderIcon(item.icon)" v-if="item.icon" class="nut-popover-item-img"></component>
@@ -42,39 +37,16 @@
 
     <view v-if="showPopup" class="nut-popover-content-bg" @touchmove="clickAway" @click="clickAway"></view>
   </view>
-  <!-- 用于计算大小 -->
-  <!-- TODO -->
-  <view :class="`nut-popover-content nut-popover-content-copy`">
-    <view :id="'popoverContentRefCopy' + refRandomId" ref="popoverContentRefCopy" class="nut-popover-content-group">
-      <view v-if="showArrow" :class="popoverArrow" :style="popoverArrowStyle"> </view>
-      <slot name="content"></slot>
-      <view
-        v-for="(item, index) in list"
-        :key="index"
-        :class="[
-          item.className,
-          item.disabled && 'nut-popover-menu-disabled',
-          'nut-popover-menu-item',
-          'nut-popover-menu-taroitem'
-        ]"
-      >
-        <component :is="renderIcon(item.icon)" v-if="item.icon" class="nut-popover-item-img"></component>
-        <view class="nut-popover-menu-item-name">{{ item.name }}</view>
-      </view>
-    </view>
-  </view>
 </template>
 <script lang="ts">
 import { onMounted, computed, watch, ref, PropType, CSSProperties } from 'vue';
 import { createComponent, renderIcon } from '@/packages/utils/create';
-const { create } = createComponent('popover');
-import { useTaroRect, rectTaro, useTaroRectById } from '@/packages/utils/useTaroRect';
-import { isArray } from '@/packages/utils/util';
-import { PopoverList, PopoverTheme, PopoverLocation } from './type';
+import { useTaroRect, useTaroRectById } from '@/packages/utils/useTaroRect';
+import { PopoverList, PopoverTheme, PopoverLocation, PopoverRootPosition } from './type';
 import NutPopup from '../popup/index.taro.vue';
-
+import Taro from '@tarojs/taro';
+const { create } = createComponent('popover');
 export default create({
-  inheritAttrs: false,
   components: {
     NutPopup
   },
@@ -87,7 +59,7 @@ export default create({
     arrowOffset: { type: Number, default: 0 },
     customClass: { type: String, default: '' },
     showArrow: { type: Boolean, default: true },
-    duration: { type: [Number, String], default: 0.2 },
+    duration: { type: [Number, String], default: 0.3 },
     overlay: { type: Boolean, default: false },
     overlayClass: { type: String, default: '' },
     overlayStyle: { type: Object as PropType<CSSProperties> },
@@ -101,17 +73,14 @@ export default create({
   setup(props, { emit }) {
     const popoverRef = ref();
     const popoverContentRef = ref();
-    const popoverContentRefCopy = ref();
-    const popoverbox = ref();
     const showPopup = ref(props.visible);
-    const popoverstyles = ref<any>({});
 
-    let rootRect = ref<rectTaro>();
+    const rootPosition = ref<PopoverRootPosition>();
 
-    let conentRootRect: {
-      height: number;
-      width: number;
-    };
+    const elRect = ref({
+      width: 0,
+      height: 0
+    });
 
     const popoverArrow = computed(() => {
       const prefixCls = 'nut-popover-arrow';
@@ -119,6 +88,7 @@ export default create({
       const direction = loca.split('-')[0];
       return `${prefixCls} ${prefixCls}-${direction} ${prefixCls}--${loca}`;
     });
+
     const popoverArrowStyle = computed(() => {
       const styles: CSSProperties = {};
       const { bgColor, arrowOffset, location } = props;
@@ -164,113 +134,130 @@ export default create({
       return str;
     };
 
-    const getRootPosition = () => {
-      if (!rootRect.value || !conentRootRect) return {};
-
-      const conentWidth = conentRootRect.width;
-      const conentHeight = conentRootRect.height;
-      const { width, height, left, top } = rootRect.value;
+    const getRootPosition = computed(() => {
+      const styles: CSSProperties = {};
+      if (!rootPosition.value) {
+        styles.visibility = 'hidden';
+        return styles;
+      }
 
+      const contentWidth = elRect.value.width;
+      const contentHeight = elRect.value.height;
+      const { width, height, left, top, right } = rootPosition.value;
       const { location, offset } = props;
-      const direction = location.split('-')[0];
-      const skew = location.split('-')[1];
+      const direction = location?.split('-')[0];
+      const skew = location?.split('-')[1];
       let cross = 0;
       let parallel = 0;
-      if (isArray(offset) && offset.length == 2) {
+      if (Array.isArray(offset) && offset?.length === 2) {
         cross += Number(offset[1]);
         parallel += Number(offset[0]);
       }
-
       if (width) {
         if (['bottom', 'top'].includes(direction)) {
-          const h = direction == 'bottom' ? height + cross : -(conentHeight + cross);
+          const h = direction === 'bottom' ? height + cross : -(contentHeight + cross);
+          styles.top = `${top + h}px`;
 
-          popoverstyles.value.top = `${top + h}px`;
           if (!skew) {
-            popoverstyles.value.left = `${-(conentWidth - width) / 2 + left + parallel}px`;
+            styles.left = `${-(contentWidth - width) / 2 + left + parallel}px`;
           }
-          if (skew == 'start') {
-            popoverstyles.value.left = `${left + parallel}px`;
+          if (skew === 'start') {
+            styles.left = `${left + parallel}px`;
           }
-          if (skew == 'end') {
-            popoverstyles.value.left = `${rootRect.value.right + parallel}px`;
+          if (skew === 'end') {
+            styles.left = `${right + parallel}px`;
           }
         }
         if (['left', 'right'].includes(direction)) {
-          const contentW = direction == 'left' ? -(conentWidth + cross) : width + cross;
-          popoverstyles.value.left = `${left + contentW}px`;
+          const contentW = direction === 'left' ? -(contentWidth + cross) : width + cross;
+          styles.left = `${left + contentW}px`;
           if (!skew) {
-            popoverstyles.value.top = `${top - conentHeight / 2 + height / 2 - 4 + parallel}px`;
+            styles.top = `${top - contentHeight / 2 + height / 2 - 4 + parallel}px`;
           }
-          if (skew == 'start') {
-            popoverstyles.value.top = `${top + parallel}px`;
+          if (skew === 'start') {
+            styles.top = `${top + parallel}px`;
           }
-          if (skew == 'end') {
-            popoverstyles.value.top = `${top + height + parallel}px`;
+          if (skew === 'end') {
+            styles.top = `${top + height + parallel}px`;
           }
         }
       }
-    };
 
-    const customStyle = computed(() => {
-      const styles: CSSProperties = {};
-      if (props.bgColor) {
-        styles.background = props.bgColor;
+      if (elRect.value.width === 0) {
+        styles.visibility = 'hidden';
+      } else {
+        styles.visibility = 'initial';
       }
-
       return styles;
     });
-    // 获取宽度
-    const getContentWidth = async () => {
-      const solve = (rect: any) => {
-        if (!(rootRect.value && rect.top == rootRect.value.top && rect.width == rootRect.value.width)) {
-          setTimeout(() => {
-            getContentWidth();
-          }, 100);
-        }
-        rootRect.value = rect;
-        getRootPosition();
-      };
-      if (props.targetId) {
-        useTaroRectById(props.targetId).then(
-          (rect: any) => {
-            solve(rect);
-          },
-          () => {}
-        );
-      } else {
-        useTaroRect(popoverRef).then(
-          (rect: any) => {
-            solve(rect);
-          },
-          () => {}
-        );
-      }
-    };
 
-    const getPopoverContentW = async (type: number = 1) => {
-      const el = type == 1 ? popoverContentRef : popoverContentRefCopy;
-      useTaroRect(el).then(
-        (rect: any) => {
-          conentRootRect = {
-            height: rect.height || 0,
-            width: rect.width || 0
+    const getPopoverContentW = async () => {
+      useTaroRect(popoverContentRef).then(
+        (rect: { width: number; height: number }) => {
+          elRect.value = {
+            height: rect.height,
+            width: rect.width
           };
-          getRootPosition();
         },
         () => {}
       );
     };
+
+    // 获取宽度
+    const getContentWidth = () => {
+      Taro.createSelectorQuery()
+        .selectViewport()
+        .scrollOffset((res) => {
+          const distance = res.scrollTop;
+
+          if (props.targetId) {
+            useTaroRectById(props.targetId).then(
+              (rect: any) => {
+                rootPosition.value = {
+                  width: rect?.width,
+                  height: rect?.height,
+                  left: rect?.left,
+                  top: rect?.top + distance,
+                  right: rect?.right
+                };
+              },
+              () => {}
+            );
+          } else {
+            useTaroRect(popoverRef).then(
+              (rect: any) => {
+                rootPosition.value = {
+                  width: rect?.width,
+                  height: rect?.height,
+                  left: rect?.left,
+                  top: rect?.top + distance,
+                  right: rect?.right
+                };
+              },
+              () => {}
+            );
+          }
+        })
+        .exec();
+      setTimeout(() => {
+        getPopoverContentW();
+      }, 300);
+    };
+
+    onMounted(() => {
+      setTimeout(() => {
+        getContentWidth();
+      }, 300);
+    });
+
     watch(
       () => props.visible,
       (value) => {
         showPopup.value = value;
         if (value) {
-          getContentWidth();
-
-          setTimeout(() => {
-            getPopoverContentW();
-          }, 300);
+          Taro.nextTick(() => {
+            getContentWidth();
+          });
         }
       }
     );
@@ -278,7 +265,7 @@ export default create({
     watch(
       () => props.location,
       () => {
-        getRootPosition();
+        getContentWidth();
       }
     );
     const update = (val: boolean) => {
@@ -294,7 +281,7 @@ export default create({
       emit('close');
     };
     const chooseItem = (item: any, index: number) => {
-      emit('choose', item, index);
+      !item.disabled && emit('choose', item, index);
       if (props.closeOnClickAction) {
         closePopover();
       }
@@ -303,13 +290,6 @@ export default create({
       props.closeOnClickOutside && closePopover();
     };
 
-    onMounted(() => {
-      setTimeout(() => {
-        getContentWidth();
-        getPopoverContentW(0);
-      }, 600);
-    });
-
     const refRandomId = Math.random().toString(36).slice(-8);
 
     return {
@@ -320,15 +300,11 @@ export default create({
       chooseItem,
       popoverRef,
       popoverContentRef,
-      popoverContentRefCopy,
-      refRandomId,
-      clickAway,
-      popoverArrowStyle,
-      customStyle,
       getRootPosition,
+      popoverArrowStyle,
       renderIcon,
-      popoverbox,
-      popoverstyles
+      refRandomId,
+      clickAway
     };
   }
 });
diff --git a/src/packages/__VUE/popover/index.vue b/src/packages/__VUE/popover/index.vue
index 67c4c88128..eec8ae85b3 100644
--- a/src/packages/__VUE/popover/index.vue
+++ b/src/packages/__VUE/popover/index.vue
@@ -1,44 +1,44 @@
 <template>
-  <div v-if="!targetId" ref="popoverRef" class="nut-popover-wrapper" @click="openPopover"
-    ><slot name="reference"></slot
-  ></div>
-  <view :class="['nut-popover', `nut-popover--${theme}`, `${customClass}`]" :style="getRootPosition">
-    <nut-popup
-      v-model:visible="showPopup"
-      :pop-class="`nut-popover-content nut-popover-content--${location}`"
-      :style="customStyle"
-      position=""
-      transition="nut-popover"
-      :overlay="overlay"
-      :duration="duration"
-      :overlay-style="overlayStyle"
-      :overlay-class="overlayClass"
-      :close-on-click-overlay="closeOnClickOverlay"
-    >
-      <view ref="popoverContentRef" class="nut-popover-content-group">
-        <view v-if="showArrow" :class="popoverArrow" :style="popoverArrowStyle"> </view>
-        <slot name="content"></slot>
-        <view
-          v-for="(item, index) in list"
-          :key="index"
-          :class="[item.className, item.disabled && 'nut-popover-menu-disabled', 'nut-popover-menu-item']"
-          @click.stop="chooseItem(item, index)"
-        >
-          <component :is="renderIcon(item.icon)" v-if="item.icon" class="nut-popover-item-img"></component>
-
-          <view class="nut-popover-menu-item-name">{{ item.name }}</view>
-        </view>
-      </view>
-    </nut-popup>
-  </view>
+  <div v-if="!targetId" ref="popoverRef" class="nut-popover-wrapper" @click="openPopover">
+    <slot name="reference"></slot>
+  </div>
+  <Teleport to="body">
+    <div :class="['nut-popover', `nut-popover--${theme}`, `${customClass}`]" :style="getRootPosition">
+      <nut-popup
+        v-model:visible="showPopup"
+        :pop-class="`nut-popover-content nut-popover-content--${location}`"
+        :style="{ background: bgColor }"
+        position=""
+        transition="nut-popover"
+        :overlay="overlay"
+        :duration="duration"
+        :overlay-style="overlayStyle"
+        :overlay-class="overlayClass"
+        :close-on-click-overlay="closeOnClickOverlay"
+      >
+        <div ref="popoverContentRef" class="nut-popover-content-group">
+          <div v-if="showArrow" :class="popoverArrow" :style="popoverArrowStyle"> </div>
+          <slot name="content"></slot>
+          <div
+            v-for="(item, index) in list"
+            :key="index"
+            :class="[item.className, item.disabled && 'nut-popover-menu-disabled', 'nut-popover-menu-item']"
+            @click.stop="chooseItem(item, index)"
+          >
+            <component :is="renderIcon(item.icon)" v-if="item.icon" class="nut-popover-item-img"></component>
+            <div class="nut-popover-menu-item-name">{{ item.name }}</div>
+          </div>
+        </div>
+      </nut-popup>
+    </div>
+  </Teleport>
 </template>
 <script lang="ts">
-import { computed, watch, ref, PropType, CSSProperties, onMounted } from 'vue';
+import { computed, watch, ref, PropType, CSSProperties, onMounted, nextTick } from 'vue';
 import { createComponent, renderIcon } from '@/packages/utils/create';
-import { isArray } from '@/packages/utils/util';
-import { useRect, rect } from '@/packages/utils/useRect';
+import { useRect } from '@/packages/utils/useRect';
 import NutPopup from '../popup/index.vue';
-import { PopoverList, PopoverTheme, PopoverLocation } from './type';
+import { PopoverList, PopoverTheme, PopoverLocation, PopoverRootPosition } from './type';
 const { create } = createComponent('popover');
 export default create({
   components: {
@@ -69,12 +69,12 @@ export default create({
     const popoverContentRef = ref();
     const showPopup = ref(props.visible);
 
-    let rootRect = ref<rect>();
+    const rootPosition = ref<PopoverRootPosition>();
 
-    let conentRootRect = ref<{
-      height: number;
-      width: number;
-    }>();
+    const elRect = ref({
+      width: 0,
+      height: 0
+    });
 
     const popoverArrow = computed(() => {
       const prefixCls = 'nut-popover-arrow';
@@ -129,48 +129,46 @@ export default create({
     };
 
     const getRootPosition = computed(() => {
-      let styles: CSSProperties = {};
-
-      if (!rootRect.value || !conentRootRect.value) return {};
-
-      const conentWidth = conentRootRect.value.width;
-      const conentHeight = conentRootRect.value.height;
-      const { width, height, left, top } = rootRect.value;
+      const styles: CSSProperties = {};
+      if (!rootPosition.value) return {};
 
+      const contentWidth = elRect.value.width;
+      const contentHeight = elRect.value.height;
+      const { width, height, left, top, right } = rootPosition.value;
       const { location, offset } = props;
-      const direction = location.split('-')[0];
-      const skew = location.split('-')[1];
+      const direction = location?.split('-')[0];
+      const skew = location?.split('-')[1];
       let cross = 0;
       let parallel = 0;
-      if (isArray(offset) && offset.length == 2) {
+      if (Array.isArray(offset) && offset?.length === 2) {
         cross += Number(offset[1]);
         parallel += Number(offset[0]);
       }
       if (width) {
         if (['bottom', 'top'].includes(direction)) {
-          const h = direction == 'bottom' ? height + cross : -(conentHeight + cross);
+          const h = direction === 'bottom' ? height + cross : -(contentHeight + cross);
           styles.top = `${top + h}px`;
 
           if (!skew) {
-            styles.left = `${-(conentWidth - width) / 2 + left + parallel}px`;
+            styles.left = `${-(contentWidth - width) / 2 + left + parallel}px`;
           }
-          if (skew == 'start') {
+          if (skew === 'start') {
             styles.left = `${left + parallel}px`;
           }
-          if (skew == 'end') {
-            styles.left = `${rootRect.value.right + parallel}px`;
+          if (skew === 'end') {
+            styles.left = `${right + parallel}px`;
           }
         }
         if (['left', 'right'].includes(direction)) {
-          const contentW = direction == 'left' ? -(conentWidth + cross) : width + cross;
+          const contentW = direction === 'left' ? -(contentWidth + cross) : width + cross;
           styles.left = `${left + contentW}px`;
           if (!skew) {
-            styles.top = `${top - conentHeight / 2 + height / 2 - 4 + parallel}px`;
+            styles.top = `${top - contentHeight / 2 + height / 2 - 4 + parallel}px`;
           }
-          if (skew == 'start') {
+          if (skew === 'start') {
             styles.top = `${top + parallel}px`;
           }
-          if (skew == 'end') {
+          if (skew === 'end') {
             styles.top = `${top + height + parallel}px`;
           }
         }
@@ -179,33 +177,28 @@ export default create({
       return styles;
     });
 
-    const customStyle = computed(() => {
-      const styles: CSSProperties = {};
-      if (props.bgColor) {
-        styles.background = props.bgColor;
-      }
-
-      return styles;
-    });
     // 获取宽度
     const getContentWidth = () => {
-      let rect = useRect(popoverRef.value);
-      if (props.targetId) {
-        rect = useRect(document.querySelector(`#${props.targetId}`) as Element);
-      }
-      rootRect.value = rect;
-      setTimeout(() => {
-        conentRootRect.value = {
-          height: popoverContentRef.value?.clientHeight,
-          width: popoverContentRef.value?.clientWidth
-        };
-      }, 0);
+      const rect = useRect(
+        props.targetId ? (document.querySelector(`#${props.targetId}`) as Element) : popoverRef.value
+      );
+      rootPosition.value = {
+        width: rect.width,
+        height: rect.height,
+        left: rect.left,
+        top: rect.top + Math.max(document.documentElement?.scrollTop || 0, document.body?.scrollTop || 0),
+        right: rect.right
+      };
+      elRect.value = {
+        height: popoverContentRef.value?.clientHeight,
+        width: popoverContentRef.value?.clientWidth
+      };
     };
 
     onMounted(() => {
       setTimeout(() => {
         getContentWidth();
-      }, 200);
+      }, 300);
     });
 
     watch(
@@ -214,7 +207,9 @@ export default create({
         showPopup.value = value;
         if (value) {
           window.addEventListener('touchstart', clickAway, true);
-          getContentWidth();
+          nextTick(() => {
+            getContentWidth();
+          });
         } else {
           window.removeEventListener('touchstart', clickAway, true);
         }
@@ -262,7 +257,6 @@ export default create({
       popoverRef,
       popoverContentRef,
       getRootPosition,
-      customStyle,
       popoverArrowStyle,
       renderIcon
     };
diff --git a/src/packages/__VUE/popover/type.ts b/src/packages/__VUE/popover/type.ts
index 5308aa027d..c818d78257 100644
--- a/src/packages/__VUE/popover/type.ts
+++ b/src/packages/__VUE/popover/type.ts
@@ -1,5 +1,13 @@
 import { Component } from 'vue';
 
+export interface PopoverRootPosition {
+  width: number;
+  height: number;
+  left: number;
+  top: number;
+  right: number;
+}
+
 export type PopoverTheme = 'light' | 'dark';
 
 export type PopoverLocation =
diff --git a/src/packages/__VUE/tour/__tests__/tour.spec.ts b/src/packages/__VUE/tour/__tests__/tour.spec.ts
deleted file mode 100644
index 5be0e7221e..0000000000
--- a/src/packages/__VUE/tour/__tests__/tour.spec.ts
+++ /dev/null
@@ -1,152 +0,0 @@
-import { mount } from '@vue/test-utils';
-import Tour, { StepOptions } from '../index.vue';
-import { nextTick } from 'vue';
-
-const steps1 = [
-  {
-    content: '70+ 高质量组件，覆盖移动端主流场景',
-    target: 'target5'
-  }
-];
-
-const steps2 = [
-  {
-    content: '支持一套代码同时开发多端小程序+H5',
-    target: 'target6',
-    popoverOffset: [40, 12],
-    arrowOffset: -36
-  }
-];
-
-const steps4 = [
-  {
-    content: '70+ 高质量组件，覆盖移动端主流场景',
-    target: 'target8'
-  }
-];
-
-const steps = [
-  {
-    content: '70+ 高质量组件，覆盖移动端主流场景',
-    target: 'target1'
-  },
-  {
-    content: '支持一套代码同时开发多端小程序+H5',
-    target: 'target2'
-  },
-  {
-    content: '基于京东APP 10.0 视觉规范',
-    target: 'target3',
-    location: 'top-end'
-  },
-  {
-    content: '支持定制主题，内置 700+ 个主题变量',
-    target: 'target4',
-    location: 'top-end'
-  }
-] as StepOptions[];
-
-test('base render', async () => {
-  const root = document.createElement('div');
-  root.id = 'target5';
-  const wrapper = mount(Tour, {
-    props: {
-      modelValue: false,
-      steps: steps1,
-      type: 'tile',
-      location: 'bottom-end'
-    }
-  });
-  await wrapper.setProps({ modelValue: true });
-  expect(wrapper.find('.nut-popover').exists()).toBeTruthy();
-  expect(wrapper.find('.nut-popover-content--bottom-end').exists()).toBeTruthy();
-});
-
-test('custom style', async () => {
-  const root = document.createElement('div');
-  root.id = 'target5';
-  const wrapper = mount(Tour, {
-    props: {
-      modelValue: true,
-      steps: steps1,
-      type: 'tile',
-      location: 'bottom-end',
-      bgColor: '#f00',
-      theme: 'dark',
-      maskWidth: '50',
-      maskHeight: '50',
-      offset: [0, 0]
-    }
-  });
-
-  const arrow = wrapper.find('.nut-popover-arrow');
-  expect(arrow.html()).toContain('border-bottom-color: #f00');
-
-  const popover = wrapper.find('.nut-popover-content');
-  expect(popover.html()).toContain('background: #f00');
-});
-
-test('custom offset', async () => {
-  const root = document.createElement('div');
-  root.id = 'target6';
-  const wrapper = mount(Tour, {
-    props: {
-      modelValue: false,
-      steps: steps2,
-      type: 'tile',
-      location: 'bottom-end',
-      bgColor: '#f00',
-      theme: 'dark',
-      offset: [8, 8]
-    }
-  });
-  wrapper.setProps({ modelValue: true });
-  const arrow = wrapper.find('.nut-popover-arrow');
-  expect(arrow.html()).toContain('right: 52px');
-});
-
-test('slot render', async () => {
-  const root = document.createElement('div');
-  root.id = 'target6';
-  const wrapper = mount(Tour, {
-    props: {
-      modelValue: false,
-      steps: steps4,
-      type: 'tile',
-      location: 'bottom-end',
-      bgColor: '#f00',
-      theme: 'dark',
-      offset: [8, 8]
-    },
-    slots: {
-      default: `nutui 4.x 即将发布，敬请期待`
-    }
-  });
-  await wrapper.setProps({ modelValue: true });
-  const popover = wrapper.find('.nut-popover-content-group');
-  expect(popover.text()).toEqual('nutui 4.x 即将发布，敬请期待');
-});
-
-test('steps render', async () => {
-  const root = document.createElement('div');
-  root.id = 'target1';
-  const root1 = document.createElement('div');
-  root1.id = 'target2';
-  const wrapper = mount(Tour, {
-    props: {
-      modelValue: false,
-      steps: steps,
-      location: 'bottom-end'
-    }
-  });
-  await wrapper.setProps({ modelValue: true });
-
-  const btn = wrapper.find('.nut-tour-content-bottom-operate-btn');
-  expect(btn.exists()).toBeTruthy();
-
-  btn.trigger('click');
-  await nextTick();
-
-  const btn2 = wrapper.findAll('.nut-tour-content-bottom-operate-btn');
-  expect(btn2.length).toBe(2);
-});
diff --git a/src/packages/__VUE/tour/__tests__/tour.spec.tsx b/src/packages/__VUE/tour/__tests__/tour.spec.tsx
new file mode 100644
index 0000000000..dedac4595f
--- /dev/null
+++ b/src/packages/__VUE/tour/__tests__/tour.spec.tsx
@@ -0,0 +1,152 @@
+import { mount } from '@vue/test-utils';
+import Tour, { StepOptions } from '../index.vue';
+
+const steps1 = [
+  {
+    content: '70+ 高质量组件，覆盖移动端主流场景',
+    target: 'tour-target'
+  }
+];
+
+const steps2 = [
+  {
+    content: '支持一套代码同时开发多端小程序+H5',
+    target: 'tour-target',
+    popoverOffset: [40, 12],
+    arrowOffset: -36
+  }
+];
+
+const steps4 = [
+  {
+    content: '70+ 高质量组件，覆盖移动端主流场景',
+    target: 'tour-target'
+  }
+];
+
+const steps = [
+  {
+    content: '70+ 高质量组件，覆盖移动端主流场景',
+    target: 'target1'
+  },
+  {
+    content: '支持一套代码同时开发多端小程序+H5',
+    target: 'target2'
+  },
+  {
+    content: '基于京东APP 10.0 视觉规范',
+    target: 'target3',
+    location: 'top-end'
+  },
+  {
+    content: '支持定制主题，内置 700+ 个主题变量',
+    target: 'target4',
+    location: 'top-end'
+  }
+] as StepOptions[];
+
+test('Tour: base render', async () => {
+  const wrapper = mount(
+    () => {
+      return <Tour modelValue={true} steps={steps1} type="tile" location="bottom-end" />;
+    },
+    {
+      global: {
+        stubs: {
+          teleport: true
+        }
+      }
+    }
+  );
+  expect(wrapper.find('.nut-popover').exists()).toBeTruthy();
+  expect(wrapper.find('.nut-popover-content--bottom-end').exists()).toBeTruthy();
+});
+
+test('Tour: custom style', async () => {
+  const wrapper = mount(
+    () => {
+      return <Tour modelValue={true} steps={steps1} theme="dark" bgColor="#f00" />;
+    },
+    {
+      global: {
+        stubs: {
+          teleport: true
+        }
+      }
+    }
+  );
+
+  const arrow = wrapper.find('.nut-popover-arrow');
+  expect(arrow.html()).toContain('border-bottom-color: #f00');
+
+  const popover = wrapper.find('.nut-popover-content');
+  expect(popover.html()).toContain('background: #f00');
+});
+
+test('Tour: custom offset', async () => {
+  const wrapper = mount(
+    () => {
+      return <Tour modelValue={true} steps={steps2} type="tile" location="bottom-end" offset={[8, 8]} />;
+    },
+    {
+      global: {
+        stubs: {
+          teleport: true
+        }
+      }
+    }
+  );
+  const arrow = wrapper.find('.nut-popover-arrow');
+  expect(arrow.html()).toContain('right: 52px');
+});
+
+test('Tour: slot render', async () => {
+  const wrapper = mount(
+    () => {
+      return (
+        <Tour modelValue={true} steps={steps4}>
+          {' '}
+          Default Slot{' '}
+        </Tour>
+      );
+    },
+    {
+      global: {
+        stubs: {
+          teleport: true
+        }
+      }
+    }
+  );
+  const popover = wrapper.find('.nut-popover-content-group');
+  expect(popover.text()).toEqual('Default Slot');
+});
+
+test('Tour: type=step', async () => {
+  const wrapper = mount(
+    () => {
+      return (
+        <div>
+          <Tour modelValue={true} steps={steps} type="step" />
+          <div id="tour-target1"></div>
+          <div id="tour-target2"></div>
+        </div>
+      );
+    },
+    {
+      global: {
+        stubs: {
+          teleport: true
+        }
+      }
+    }
+  );
+
+  const btn = wrapper.find('.nut-tour-content-bottom-operate-btn');
+  expect(btn.exists()).toBeTruthy();
+
+  await btn.trigger('click');
+
+  const btn2 = wrapper.findAll('.nut-tour-content-bottom-operate-btn');
+  expect(btn2.length).toBe(2);
+});
diff --git a/src/packages/__VUE/tour/demo/index.vue b/src/packages/__VUE/tour/demo/index.vue
index de24a2ad31..056fe194db 100644
--- a/src/packages/__VUE/tour/demo/index.vue
+++ b/src/packages/__VUE/tour/demo/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <Demo>
+  <Demo style="padding-bottom: 50px">
     <h2>{{ t('basic') }}</h2>
     <Basic />