Блог

В принципе, у меня есть таблица с возможностью прокрутки, а в последнем столбце есть многоточие, которое открывает выпадающий список, но поскольку таблица доступна для прокрутки, выпадающий список отключается.

Если вы посмотрите на реализацию выпадающих списков bootstrap с помощью 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>
 

Честно говоря, я понятия не имею, что я делаю, документы popper js не содержат примеров, только диаграммы. Помощь будет оценена.

Используете ли вы bootstrap v5 или v4.5? Для меня это работает с версией 4.5 с атрибутом html. data-boundary="window" Но я не мог заставить его работать с v5, поэтому я, наконец, нашел другое решение:

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

без strategy выбора:

с strategy опцией:

Кстати. Все еще понятия не имею, как заставить его работать декларативно с data-bs-... атрибутами html.