Javascript 如何使用popper js相对于主体而不是父对象定位下拉列表

基本上我有一个可滚动的表格，在最后一列中有一个省略号，它打开了一个下拉列表，但是因为表格是可滚动的，所以下拉列表被切断了

如果你看看popper js的下拉列表，你可以通过一个边界选项

这就是它现在的样子：

这是我到目前为止的代码：

<template>
    <div class="relative">
        <div @click="toggleDropdown" ref="trigger">
            <slot name="trigger"></slot>
        </div>

        <div :class="[widthClass]"
             @click="open = false"
             class="rounded-md shadow-lg bg-white border border-gray-100 dark:border-gray-700 dark:text-gray-300 dark:bg-gray-700 text-gray-600 dark:text-gray-300"
             ref="menu"
             v-show="open">
            <div :class="contentClasses" class="rounded-md shadow-xs">
                <slot name="content"></slot>
            </div>
        </div>
    </div>
</template>

<script>
    import {createPopper} from '@popperjs/core';

    export default {

        props: {
            width         : {
                default: '48',
            },
            contentClasses: {
                default: () => ['py-1'],
            },
        },

        computed: {
            widthClass() {
                return {
                    '48': 'w-48',
                    '56': 'w-56',
                    '64': 'w-64',
                }[this.width.toString()]
            },
        },

        data() {
            return {
                open: false
            }
        },

        methods: {
            toggleDropdown() {
                if (this.open) {
                    this.open = false;
                } else {
                    this.open = true;
                    createPopper(this.$refs.trigger, this.$refs.menu, {
                        placement: 'bottom-start',
                        container: 'body',
                        modifiers: [
                            {
                                name   : 'preventOverflow',
                                enabled: false,
                                options: {
                                    boundary    : document.body,
                                    altBoundary : true,
                                    rootBoundary: 'window',
                                }
                            }
                        ]
                    });
                }
            },
        },
    }
</script>

从“@popperjs/core”导入{createPopper}；
导出默认值{
道具：{
宽度：{
默认值：“48”，
},
内容类别：{
默认值：（）=>['py-1']，
},
},
计算：{
widthClass（）{
返回{
‘48’：‘w-48’，
‘56’：‘w-56’，
“64”：“w-64”，
}[this.width.toString（）]
},
},
数据（）{
返回{
开放：假
}
},
方法：{
切换下拉菜单（）{
如果（这个打开）{
this.open=false；
}否则{
this.open=true；
createPopper（此.$refs.trigger，此.$refs.menu{
位置：'底部开始'，
容器：'主体'，
修改器：[
{
名称：“防止溢出”，
启用：false，
选项：{
边界：document.body，
是的，
rootBoundary:'窗口'，
}
}
]
});
}
},
},
}

---

老实说，我不知道我在做什么，popper js文档没有提供示例，只提供图表。非常感谢您的帮助。

您是否正在使用bootstrap v5 o v4.5？ 它适用于具有html属性的v4.5版本

databoundary=“window”

。但我无法使其与v5一起工作，因此我最终找到了另一个解决方案：

return new bootstrap.Dropdown(dropdownTriggerEl, {
            popperConfig: {
                strategy: "fixed"
            }
        });

没有

策略

选项：

使用

策略

选项：

---

顺便说一下。仍然不知道如何使它以声明方式与

数据bs-…

html属性一起工作。

您使用的是bootstrap v5 o v4.5吗？ 它适用于具有html属性的v4.5版本

databoundary=“window”

。但我无法使其与v5一起工作，因此我最终找到了另一个解决方案：

return new bootstrap.Dropdown(dropdownTriggerEl, {
            popperConfig: {
                strategy: "fixed"
            }
        });

没有

策略

选项：

使用

策略

选项：

---

顺便说一下。仍然不知道如何使它以声明方式与

数据bs-…

html属性一起工作。

Im使用TailwindCSS，我只是参考了Popper JSIm使用TailwindCSS的引导实现，我只是参考了Popper JS的引导实现