fix: popover (#1989)

src/packages/__VUE/popover/demo.vue

@@ -47,7 +47,7 @@
       <template #content>
         <div class="self-content">
           <div class="self-content-item" v-for="(item, index) in selfContent" :key="index">
-            <component :is="renderIcon(item.name)"></component>
+            <Service></Service>
             <div class="self-content-desc">{{ item.desc }}</div>
           </div>
         </div>

src/packages/__VUE/popover/index.scss

@@ -257,5 +257,5 @@
 // Taro
 .nut-popover-content-copy {
   position: absolute;
-  top: 99999px;
+  top: -99999px;
 }

src/packages/__VUE/popover/index.taro.vue

@@ -44,7 +44,7 @@
   </view>
   <!-- 用于计算大小 -->
   <!-- TODO -->
-  <div :class="`nut-popover-content nut-popover-content-copy`">
+  <view :class="`nut-popover-content nut-popover-content-copy`">
     <view ref="popoverContentRefCopy" :id="'popoverContentRefCopy' + refRandomId" class="nut-popover-content-group">
       <view :class="popoverArrow" v-if="showArrow" :style="popoverArrowStyle"> </view>
       <slot name="content"></slot>
@@ -62,13 +62,14 @@
         <view class="nut-popover-menu-item-name">{{ item.name }}</view>
       </view>
     </view>
-  </div>
+  </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 } from '@/packages/utils/useTaroRect';
+import { useRect, rect } from '@/packages/utils/useRect';
 import { isArray } from '@/packages/utils/util';
 import { PopoverList, PopoverTheme, PopoverLocation } from './type';
 import Taro from '@tarojs/taro';
@@ -226,10 +227,20 @@ export default create({
     const getContentWidth = async () => {
       let rect;
       if (props.targetId) {
-        rect = await useTaroRect(props.targetId, Taro);
+        if (Taro.getEnv() == Taro.ENV_TYPE.WEB) {
+          rect = useRect(document.querySelector(`#${props.targetId}`) as Element);
+        } else {
+          rect = await useTaroRect(props.targetId, Taro);
+        }
       } else {
         rect = await useTaroRect(popoverRef, Taro);
       }
+
+      if (!(rootRect.value && rect.top == rootRect.value.top && rect.width == rootRect.value.width)) {
+        setTimeout(() => {
+          getContentWidth();
+        }, 100);
+      }
       rootRect.value = rect;
 
       getRootPosition();
@@ -252,9 +263,7 @@ export default create({
       (value) => {
         showPopup.value = value;
         if (value) {
-          setTimeout(() => {
-            getContentWidth();
-          }, 100);
+          getContentWidth();
 
           setTimeout(() => {
             getPopoverContentW();
@@ -321,24 +330,3 @@ export default create({
   }
 });
 </script>
-<style lang="scss">
-.self-content {
-  width: 195px;
-  display: flex;
-  flex-wrap: wrap;
-  &-item {
-    margin-top: 10px;
-    margin-bottom: 10px;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    flex-direction: column;
-  }
-  &-desc {
-    margin-top: 5px;
-    width: 60px;
-    font-size: 10px;
-    text-align: center;
-  }
-}
-</style>

src/packages/__VUE/popup/index.vue

@@ -7,6 +7,8 @@
       :z-index="zIndex"
       :lock-scroll="lockScroll"
       :duration="duration"
+      :overlay-class="overlayClass"
+      :overlay-style="overlayStyle"
       @click="onClickOverlay"
       v-bind="$attrs"
     />

src/packages/__VUE/popup/props.ts

@@ -71,5 +71,12 @@ export const popupProps = {
   safeAreaInsetBottom: {
     type: Boolean,
     default: false
+  },
+  overlayClass: {
+    type: String,
+    default: ''
+  },
+  overlayStyle: {
+    type: Object as PropType<CSSProperties>
   }
 };

src/sites/mobile-taro/vue/src/exhibition/pages/popover/index.vue

@@ -45,7 +45,8 @@
       <template #content>
         <div class="self-content">
           <div class="self-content-item" v-for="(item, index) in selfContent" :key="index">
-            <component :is="renderIcon(item.name)"></component>
+            <!-- <component :is="renderIcon(item.name)"></component> -->
+            <Service />
             <div class="self-content-desc">{{ item.desc }}</div>
           </div>
         </div>
@@ -56,7 +57,14 @@
     <nut-cell title="点击查看更多方向" @click="handlePicker"></nut-cell>
 
     <nut-popup position="bottom" v-model:visible="showPicker">
-      <nut-picker :columns="columns" title="" @change="change" :swipe-duration="500" @confirm="closePicker">
+      <nut-picker
+        :columns="columns"
+        title=""
+        @change="change"
+        :swipe-duration="500"
+        @confirm="closePicker"
+        @close="closePicker"
+      >
         <template #top>
           <div class="brickBox">
             <div class="brick" id="pickerTarget"></div>
@@ -98,6 +106,9 @@ import { renderIcon } from '../../../../../../../packages/utils/create';
 import { Service, Notice, Location, Category, Scan2, Message, Cart2, My2 } from '@nutui/icons-vue-taro';
 
 export default {
+  components: {
+    Service
+  },
   setup() {
     const state = reactive({
       showIcon: false,