fix(popup): content 尺寸变化后自动更新位置

examples/dropdown/demos/multiple.vue

@@ -20,7 +20,7 @@ export default {
   data() {
     return {
       options: [{
-        content: '操作二',
+        content: '操作一',
         value: 1,
         children: [{
           content: '操作九',

src/popup/container.tsx

@@ -10,33 +10,38 @@ function isContentRectChanged(rect1: DOMRectReadOnly, rect2: DOMRectReadOnly) {
   return false;
 }
 
+function observeResize(elm: Element, cb: (rect: DOMRectReadOnly) => void) {
+  if (!window?.ResizeObserver || !elm) return;
+  let prevContentRect = null as DOMRectReadOnly;
+  const ro = new ResizeObserver((entries = []) => {
+    const { contentRect } = entries[0] || {};
+    if (isContentRectChanged(contentRect, prevContentRect)) {
+      prevContentRect = contentRect;
+      cb(contentRect);
+      return;
+    }
+    // omit initial change
+    if (!prevContentRect) {
+      prevContentRect = contentRect;
+    }
+  });
+
+  ro.observe(elm);
+  return function () {
+    ro.unobserve(elm);
+  };
+}
+
 const Ref = Vue.extend({
   data() {
     return {
       contentRect: null as DOMRectReadOnly,
     };
   },
   mounted() {
-    if (window?.ResizeObserver && this.$el) {
-      const el = this.$el;
-      const vm = this as any;
-      const ro = new ResizeObserver((entries = []) => {
-        const { contentRect } = entries[0] || {};
-        if (isContentRectChanged(contentRect, vm.contentRect)) {
-          vm.contentRect = contentRect;
-          vm.$emit('resize', { ...contentRect });
-          return;
-        }
-        // omit initial change
-        if (!vm.contentRect) {
-          vm.contentRect = contentRect;
-        }
-      });
-      ro.observe(el);
-      this.$on('hook:destroyed', () => {
-        ro.unobserve(el);
-      });
-    }
+    this.$on('hook:destroyed', observeResize(this.$el, (ev) => {
+      this.$emit('resize', ev);
+    }));
   },
   render() {
     const children = this.$slots.default || [];
@@ -85,7 +90,13 @@ export default Vue.extend({
           return <div>{parent.$slots.content}</div>;
         },
         mounted() {
-          parent.$emit('mounted');
+          parent.$emit('contentMounted');
+          const content = this.$el.children[0];
+          if (content) {
+            this.$on('hook:destroyed', observeResize(content, (ev) => {
+              parent.$emit('contentResize', ev);
+            }));
+          }
         },
         destroyed() {
           parent.content = null;

src/popup/popup.tsx

@@ -129,15 +129,11 @@ export default Vue.extend({
     if (hasTrigger.hover) {
       on(reference, 'mouseenter', () => this.handleOpen({ trigger: 'trigger-element-hover' }));
       on(reference, 'mouseleave', () => this.handleClose({ trigger: 'trigger-element-hover' }));
-      on(reference, 'click', () => {
-        this.refClicked = true;
-      });
     } else if (hasTrigger.focus) {
       on(reference, 'focusin', () => this.handleOpen({ trigger: 'trigger-element-focus' }));
       on(reference, 'focusout', () => this.handleClose({ trigger: 'trigger-element-blur' }));
     } else if (hasTrigger.click) {
       on(reference, 'click', (e: MouseEvent) => {
-        this.refClicked = true;
         // override nested popups with trigger hover since higher priority
         this.visibleState = 0;
         this.handleToggle({ e, trigger: 'trigger-element-click' });
@@ -154,6 +150,11 @@ export default Vue.extend({
         e.button === 2 && this.handleToggle({ trigger: 'context-menu' });
       });
     }
+    if (!hasTrigger['context-menu']) {
+      on(reference, 'click', () => {
+        this.refClicked = true;
+      });
+    }
   },
   updated() {
     (this.$refs.container as any)?.updateContent();
@@ -328,24 +329,22 @@ export default Vue.extend({
     } = this;
     const ref = renderContent(this, 'default', 'triggerElement');
     const content = renderTNodeJSX(this, 'content');
-
-    if (this.hideEmptyPopup && ['', undefined, null].includes(content)) {
-      return ref;
-    }
+    const hidePopup = this.hideEmptyPopup && ['', undefined, null].includes(content);
 
     const overlay = visible || !destroyOnClose
       ? h(
         'div',
         {
           class: name,
           ref: 'popper',
+          style: destroyOnClose && hidePopup ? { display: 'none' } : undefined,
           directives: destroyOnClose
             ? undefined
             : [
                     {
                       name: 'show',
                       rawName: 'v-show',
-                      value: visible,
+                      value: visible && !hidePopup,
                       expression: 'visible',
                     } as VNodeDirective,
             ],
@@ -389,7 +388,7 @@ export default Vue.extend({
     return (
       <Container
         ref="container"
-        onMounted={() => {
+        onContentMounted={() => {
           if (visible) {
             this.updatePopper();
             this.updateOverlayStyle();
@@ -400,6 +399,11 @@ export default Vue.extend({
             this.updatePopper();
           }
         }}
+        onContentResize={() => {
+          if (visible) {
+            this.updatePopper();
+          }
+        }}
         parent={this}
         visible={visible}
         attach={this.attach}