Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions src/menu/submenu.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -270,6 +270,7 @@ export default defineComponent({
);
const realPopup = (
<Popup
popperContentElement="overlay"
{...((this.popupProps ?? {}) as TdSubmenuProps['popupProps'])}
overlayInnerClassName={[...this.overlayInnerClassName]}
overlayClassName={[...this.overlayClassName]}
Expand Down
22 changes: 18 additions & 4 deletions src/popup/popup.tsx
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { VNodeDirective } from 'vue';
import { PropType, VNodeDirective } from 'vue';
import { createPopper } from '@popperjs/core';
import { debounce } from 'lodash-es';
import { on, off, once } from '../utils/dom';
Expand Down Expand Up @@ -38,6 +38,13 @@ export default mixins(classPrefixMixins, getAttachConfigMixins('popup')).extend(

props: {
...props,
/** @private
* @description popper 内容元素,用于自定义 popper 元素时传入
* 可以是 HTMLElement 或者 ref 名称字符串 (如 'overlay')
*/
popperContentElement: {
type: [String, Object] as PropType<string | HTMLElement>,
},
expandAnimation: {
type: Boolean,
},
Expand Down Expand Up @@ -193,7 +200,13 @@ export default mixins(classPrefixMixins, getAttachConfigMixins('popup')).extend(
methods: {
updatePopper() {
const { $el: triggerEl } = this;
const popperEl = this.$refs.popper as HTMLElement;
// 支持传入字符串 ref 名称或 HTMLElement
let popperEl: HTMLElement;
if (typeof this.popperContentElement === 'string') {
popperEl = this.$refs[this.popperContentElement] as HTMLElement;
} else {
popperEl = this.popperContentElement || (this.$refs.popper as HTMLElement);
}

if (!popperEl || !this.visible) return;
if (this.popper) {
Expand Down Expand Up @@ -363,8 +376,9 @@ export default mixins(classPrefixMixins, getAttachConfigMixins('popup')).extend(
}
},
onAfterEnter() {
if (this.visible) {
this.updatePopper();
if (this.visible && this.popper) {
// 动画完成后,元素已有正确尺寸,使用 forceUpdate 强制重新运行所有 modifiers
this.popper.forceUpdate();
}
},
onLeave() {
Expand Down
Loading