@tdesign/uniapp 0.7.2 → 0.8.0

package/dist/popover/popover.vue

@@ -13,7 +13,7 @@
       :z-index="11000"
       :duration="0"
       background-color="rgba(0,0,0,0)"
-      @click="onOverlayTap($event, { tagId: 'popover-overlay' })"
+      @click="(e) => onOverlayTap(e, { tagId: 'popover-overlay' })"
     />
     <view
       v-if="realVisible"
@@ -51,299 +51,300 @@ delete props.visible;
 const name = `${prefix}-popover`;
 
 
-export default uniComponent({
-  name,
-  options: {
-    styleIsolation: 'shared',
-  },
-
-  controlledProps: [
-    {
-      key: 'visible',
-      event: 'visible-change',
-    },
-  ],
-
-  externalClasses: [
-    `${prefix}-class`,
-    `${prefix}-class-content`,
-    `${prefix}-class-trigger`,
-  ],
-
-  mixins: [
-    transitionMixins,
-    pageScrollMixin(),
-  ],
-
+export default {
   components: {
     TOverlay,
   },
+  ...uniComponent({
+    name,
+    options: {
+      styleIsolation: 'shared',
+    },
 
-  props: {
-    ...props,
-  },
+    controlledProps: [
+      {
+        key: 'visible',
+        event: 'visible-change',
+      },
+    ],
+
+    externalClasses: [
+      `${prefix}-class`,
+      `${prefix}-class-content`,
+      `${prefix}-class-trigger`,
+    ],
+
+    mixins: [
+      transitionMixins,
+      pageScrollMixin(),
+    ],
+
+    props: {
+      ...props,
+    },
 
-  emits: [
-    'visible-change',
-    'leaved',
-    'update:visible',
-  ],
+    emits: [
+      'visible-change',
+      'leaved',
+      'update:visible',
+    ],
 
-  data() {
-    return {
-      prefix,
-      classPrefix: name,
+    data() {
+      return {
+        prefix,
+        classPrefix: name,
 
-      dataVisible: coalesce(this.visible, this.defaultVisible),
+        dataVisible: coalesce(this.visible, this.defaultVisible),
 
-      innerPlacement: 'top',
-      contentStyle: '',
-      arrowStyle: '',
-    };
-  },
-  watch: {
-    visible(val) {
-      if (val === undefined || val === null) return;
-      this.updateVisible(val);
-    },
-    'placement'(v) {
-      if (v) {
-        nextTick().then(() => {
-          this.computePosition();
-        });
-      }
+        innerPlacement: 'top',
+        contentStyle: '',
+        arrowStyle: '',
+      };
     },
-    realVisible(v) {
-      if (v) {
-        nextTick().then(() => {
-          this.computePosition();
+    watch: {
+      visible(val) {
+        if (val === undefined || val === null) return;
+        this.updateVisible(val);
+      },
+      'placement'(v) {
+        if (v) {
           nextTick().then(() => {
             this.computePosition();
           });
-        });
-      }
-    },
-  },
-  mounted() {
-
-  },
-  methods: {
-    onScroll() {
-      if (this.realVisible) {
-        debounce(() => this.computePosition(), 100);
-      }
-    },
-
-    updateVisible(visible) {
-      if (visible === this.dataVisible) return;
-      this.dataVisible = visible;
-      nextTick().then(() => {
-        this._trigger('visible-change', { visible });
-        this.$emit('update:visible', visible);
-      });
-    },
-
-    onOverlayTap() {
-      if (this.closeOnClickOutside) {
-        this.updateVisible(false);
-      }
+        }
+      },
+      realVisible(v) {
+        if (v) {
+          nextTick().then(() => {
+            this.computePosition();
+            nextTick().then(() => {
+              this.computePosition();
+            });
+          });
+        }
+      },
     },
+    mounted() {
 
-    getToward(placement) {
-      const horizontal = ['top', 'bottom'];
-      const vertical = ['left', 'right'];
-      const isHorizontal = horizontal.find(item => placement.includes(item));
-      const isVertical = vertical.find(item => placement.includes(item));
-      const isBase = [...horizontal, ...vertical].find(item => item === placement);
-      const isEnd = placement.includes('end');
-      return {
-        isHorizontal,
-        isVertical,
-        isBase,
-        isEnd,
-      };
     },
+    methods: {
+      onScroll() {
+        if (this.realVisible) {
+          debounce(() => this.computePosition(), 100);
+        }
+      },
 
-    calcArrowStyle(placement, contentDom, popoverDom) {
-      const { isHorizontal, isVertical, isBase, isEnd } = this.getToward(placement);
+      updateVisible(visible) {
+        if (visible === this.dataVisible) return;
+        this.dataVisible = visible;
+        nextTick().then(() => {
+          this._trigger('visible-change', { visible });
+          this.$emit('update:visible', visible);
+        });
+      },
 
-      if (isBase) {
-        return '';
-      }
+      onOverlayTap() {
+        if (this.closeOnClickOutside) {
+          this.updateVisible(false);
+        }
+      },
+
+      getToward(placement) {
+        const horizontal = ['top', 'bottom'];
+        const vertical = ['left', 'right'];
+        const isHorizontal = horizontal.find(item => placement.includes(item));
+        const isVertical = vertical.find(item => placement.includes(item));
+        const isBase = [...horizontal, ...vertical].find(item => item === placement);
+        const isEnd = placement.includes('end');
+        return {
+          isHorizontal,
+          isVertical,
+          isBase,
+          isEnd,
+        };
+      },
+
+      calcArrowStyle(placement, contentDom, popoverDom) {
+        const { isHorizontal, isVertical, isBase, isEnd } = this.getToward(placement);
+
+        if (isBase) {
+          return '';
+        }
 
-      const { width, left } = contentDom;
-      const { width: popperWidth, height: popperHeight } = popoverDom;
-      const { windowWidth } = getWindowInfo();
+        const { width, left } = contentDom;
+        const { width: popperWidth, height: popperHeight } = popoverDom;
+        const { windowWidth } = getWindowInfo();
 
-      if (isHorizontal) {
-        const padding = isEnd ? Math.min(width + left, popperWidth) : Math.min(windowWidth - left, popperWidth);
-        if (isEnd) {
-          return `left:${padding - 28}px;`;
+        if (isHorizontal) {
+          const padding = isEnd ? Math.min(width + left, popperWidth) : Math.min(windowWidth - left, popperWidth);
+          if (isEnd) {
+            return `left:${padding - 28}px;`;
+          }
+          return `right:${padding - 28}px;`;
+        }
+        if (isVertical) {
+          const offset = popperHeight - 28;
+          if (isEnd) {
+            return `top:${offset}px;`;
+          }
+          return `bottom:${offset}px;top:unset;`;
         }
-        return `right:${padding - 28}px;`;
-      }
-      if (isVertical) {
-        const offset = popperHeight - 28;
-        if (isEnd) {
-          return `top:${offset}px;`;
+        return '';
+      },
+
+      calcContentPosition(placement, triggerRect, contentRect) {
+        let top = 0;
+        let left = 0;
+
+        const isTopBase = placement.startsWith('top');
+        const isBottomBase = placement.startsWith('bottom');
+        const isLeftBase = placement.startsWith('left');
+        const isRightBase = placement.startsWith('right');
+
+        if (isTopBase) {
+          top = triggerRect.top - contentRect.height;
+        } else if (isBottomBase) {
+          top = triggerRect.top + triggerRect.height;
+        } else if (isLeftBase) {
+          left = triggerRect.left - contentRect.width;
+        } else if (isRightBase) {
+          left = triggerRect.left + triggerRect.width;
+        } else {
+          top = triggerRect.top - contentRect.height;
         }
-        return `bottom:${offset}px;top:unset;`;
-      }
-      return '';
-    },
 
-    calcContentPosition(placement, triggerRect, contentRect) {
-      let top = 0;
-      let left = 0;
-
-      const isTopBase = placement.startsWith('top');
-      const isBottomBase = placement.startsWith('bottom');
-      const isLeftBase = placement.startsWith('left');
-      const isRightBase = placement.startsWith('right');
-
-      if (isTopBase) {
-        top = triggerRect.top - contentRect.height;
-      } else if (isBottomBase) {
-        top = triggerRect.top + triggerRect.height;
-      } else if (isLeftBase) {
-        left = triggerRect.left - contentRect.width;
-      } else if (isRightBase) {
-        left = triggerRect.left + triggerRect.width;
-      } else {
-        top = triggerRect.top - contentRect.height;
-      }
-
-      const isStart = placement.includes('start');
-      const isEnd = placement.includes('end');
-
-      let align;
-      if (isStart) align = 'start';
-      else if (isEnd) align = 'end';
-      else align = 'center';
-
-      if (isTopBase || isBottomBase) {
-        left = this.alignCrossAxis(triggerRect.left, triggerRect.width, contentRect.width, align);
-      }
-
-      if (isLeftBase || isRightBase) {
-        top = this.alignCrossAxis(triggerRect.top, triggerRect.height, contentRect.height, align);
-      }
-
-      return { top, left };
-    },
+        const isStart = placement.includes('start');
+        const isEnd = placement.includes('end');
 
-    alignCrossAxis(start, triggerSize, contentSize, align) {
-      if (align === 'start') return start;
-      if (align === 'end') return start + triggerSize - contentSize;
-      return start + triggerSize / 2 - contentSize / 2;
-    },
+        let align;
+        if (isStart) align = 'start';
+        else if (isEnd) align = 'end';
+        else align = 'center';
 
-    calcPlacement(isFixed, placement, triggerRect, contentRect) {
-      return new Promise((resolve) => {
-        const owner = uni.createSelectorQuery().in(this);
-        owner.select(`.${name}-wrapper--fixed`).boundingClientRect();
-        owner.exec((b) => {
-          const [triggerChildRect] = b;
-          if (triggerChildRect && isFixed) {
-            triggerRect = triggerChildRect;
-          }
+        if (isTopBase || isBottomBase) {
+          left = this.alignCrossAxis(triggerRect.left, triggerRect.width, contentRect.width, align);
+        }
 
-          const {
-            isHorizontal,
-            isVertical,
-          } = this.getToward(placement);
-          const {
-            width: contentWidth,
-            height: contentHeight,
-          } = contentRect;
-          const {
-            left: triggerLeft,
-            top: triggerTop,
-            right: triggerRight,
-            bottom: triggerBottom,
-          } = triggerRect;
-          let canPlace = true;
-          const {
-            windowWidth,
-            windowHeight,
-          } = getWindowInfo();
-          let finalPlacement = placement;
-          if (isHorizontal) {
-            if (placement.startsWith('top')) {
-              canPlace = triggerTop - contentHeight >= 0;
-            } else if (placement.startsWith('bottom')) {
-              canPlace = triggerBottom + contentHeight <= windowHeight;
-            }
-          } else if (isVertical) {
-            if (placement.startsWith('left')) {
-              canPlace = triggerLeft - contentWidth >= 0;
-            } else if (placement.startsWith('right')) {
-              canPlace = triggerRight + contentWidth <= windowWidth;
+        if (isLeftBase || isRightBase) {
+          top = this.alignCrossAxis(triggerRect.top, triggerRect.height, contentRect.height, align);
+        }
+
+        return { top, left };
+      },
+
+      alignCrossAxis(start, triggerSize, contentSize, align) {
+        if (align === 'start') return start;
+        if (align === 'end') return start + triggerSize - contentSize;
+        return start + triggerSize / 2 - contentSize / 2;
+      },
+
+      calcPlacement(isFixed, placement, triggerRect, contentRect) {
+        return new Promise((resolve) => {
+          const owner = uni.createSelectorQuery().in(this);
+          owner.select(`.${name}-wrapper--fixed`).boundingClientRect();
+          owner.exec((b) => {
+            const [triggerChildRect] = b;
+            if (triggerChildRect && isFixed) {
+              triggerRect = triggerChildRect;
             }
-          }
-          if (!canPlace) {
-          // 反向
+
+            const {
+              isHorizontal,
+              isVertical,
+            } = this.getToward(placement);
+            const {
+              width: contentWidth,
+              height: contentHeight,
+            } = contentRect;
+            const {
+              left: triggerLeft,
+              top: triggerTop,
+              right: triggerRight,
+              bottom: triggerBottom,
+            } = triggerRect;
+            let canPlace = true;
+            const {
+              windowWidth,
+              windowHeight,
+            } = getWindowInfo();
+            let finalPlacement = placement;
             if (isHorizontal) {
-              finalPlacement = placement.startsWith('top')
-                ? placement.replace('top', 'bottom')
-                : placement.replace('bottom', 'top');
+              if (placement.startsWith('top')) {
+                canPlace = triggerTop - contentHeight >= 0;
+              } else if (placement.startsWith('bottom')) {
+                canPlace = triggerBottom + contentHeight <= windowHeight;
+              }
             } else if (isVertical) {
-              finalPlacement = placement.startsWith('left')
-                ? placement.replace('left', 'right')
-                : placement.replace('right', 'left');
+              if (placement.startsWith('left')) {
+                canPlace = triggerLeft - contentWidth >= 0;
+              } else if (placement.startsWith('right')) {
+                canPlace = triggerRight + contentWidth <= windowWidth;
+              }
             }
-          }
-          const basePos = this.calcContentPosition(finalPlacement, triggerRect, contentRect);
+            if (!canPlace) {
+              // 反向
+              if (isHorizontal) {
+                finalPlacement = placement.startsWith('top')
+                  ? placement.replace('top', 'bottom')
+                  : placement.replace('bottom', 'top');
+              } else if (isVertical) {
+                finalPlacement = placement.startsWith('left')
+                  ? placement.replace('left', 'right')
+                  : placement.replace('right', 'left');
+              }
+            }
+            const basePos = this.calcContentPosition(finalPlacement, triggerRect, contentRect);
 
-          resolve({
-            placement: finalPlacement,
-            ...basePos,
+            resolve({
+              placement: finalPlacement,
+              ...basePos,
+            });
           });
         });
-      });
-    },
-    async computePosition() {
-      const { placement } = this;
-      const innerPlacement = placement
-        .replace(/-(left|top)$/, '-start')
-        .replace(/-(right|bottom)$/, '-end');
-      // 此处必须要设置，否则计算的位置会出错
-      this.innerPlacement = innerPlacement;
-
-      const query = uni.createSelectorQuery().in(this);
-
-      query.select(`#${name}-wrapper`).boundingClientRect();
-      query.select(`#${name}-content`).boundingClientRect();
-      query.selectViewport().scrollOffset();
-      query.exec(async (res) => {
-        const [triggerRect, contentRect, viewportOffset] = res;
-        if (!triggerRect || !contentRect) return;
-        const isFixed = this.fixed;
-        // 最终放置位置
-        const { placement: finalPlacement, ...basePos } = await this.calcPlacement(
-          isFixed,
-          innerPlacement,
-          triggerRect,
-          contentRect,
-        );
-        // TODO 优化：滚动时可能导致箭头闪烁
-        this.innerPlacement = finalPlacement;
-
-        const {
-          scrollTop = 0,
-          scrollLeft = 0,
-        } = viewportOffset || {};
-        const top = isFixed ? basePos.top : basePos.top + scrollTop;
-        const left = isFixed ? basePos.left : basePos.left + scrollLeft;
-        const style = `top:${Math.max(top, 0)}px;left:${Math.max(left, 0)}px;`;
-        const arrowStyle = this.calcArrowStyle(innerPlacement, triggerRect, contentRect);
-
-        this.contentStyle = style;
-        this.arrowStyle = arrowStyle;
-      });
+      },
+      async computePosition() {
+        const { placement } = this;
+        const innerPlacement = placement
+          .replace(/-(left|top)$/, '-start')
+          .replace(/-(right|bottom)$/, '-end');
+        // 此处必须要设置，否则计算的位置会出错
+        this.innerPlacement = innerPlacement;
+
+        const query = uni.createSelectorQuery().in(this);
+
+        query.select(`#${name}-wrapper`).boundingClientRect();
+        query.select(`#${name}-content`).boundingClientRect();
+        query.selectViewport().scrollOffset();
+        query.exec(async (res) => {
+          const [triggerRect, contentRect, viewportOffset] = res;
+          if (!triggerRect || !contentRect) return;
+          const isFixed = this.fixed;
+          // 最终放置位置
+          const { placement: finalPlacement, ...basePos } = await this.calcPlacement(
+            isFixed,
+            innerPlacement,
+            triggerRect,
+            contentRect,
+          );
+          // TODO 优化：滚动时可能导致箭头闪烁
+          this.innerPlacement = finalPlacement;
+
+          const {
+            scrollTop = 0,
+            scrollLeft = 0,
+          } = viewportOffset || {};
+          const top = isFixed ? basePos.top : basePos.top + scrollTop;
+          const left = isFixed ? basePos.left : basePos.left + scrollLeft;
+          const style = `top:${Math.max(top, 0)}px;left:${Math.max(left, 0)}px;`;
+          const arrowStyle = this.calcArrowStyle(innerPlacement, triggerRect, contentRect);
+
+          this.contentStyle = style;
+          this.arrowStyle = arrowStyle;
+        });
+      },
     },
-  },
-});
+  }),
+};
 
 
 </script>

package/dist/popover/props.ts

@@ -42,13 +42,13 @@ export default {
   },
   /** 是否显示气泡确认框 */
   visible: {
-    type: Boolean,
-    default: undefined,
+    type: [Boolean, null],
+    default: null as TdPopoverProps['visible'],
   },
   /** 是否显示气泡确认框，非受控属性 */
   defaultVisible: {
-    type: Boolean,
-    default: undefined,
+    type: [Boolean, null],
+    default: null as TdPopoverProps['defaultVisible'],
   },
   /** 确认框显示或隐藏时触发 */
   onVisibleChange: {

package/dist/popover/type.ts

@@ -49,11 +49,11 @@ export interface TdPopoverProps {
   /**
    * 是否显示气泡确认框
    */
-  visible?: boolean;
+  visible?: boolean | null;
   /**
    * 是否显示气泡确认框，非受控属性
    */
-  defaultVisible?: boolean;
+  defaultVisible?: boolean | null;
   /**
    * 确认框显示或隐藏时触发
    */