Сделайте Bootstrap-Vue модальным перетаскиваемым

Question

Я использую модальности bootstrap-vue в проекте и не хочу, чтобы они были перетаскиваемыми.

Я гуглил по этому поводу, но я довольно новичок в веб-разработке, поэтому я немного перегружен решениями для начальной загрузки без vue.

Я думаю, что пример кода не обязателен, так как я использую стандартные модалы bootstrap-vue. Скажи мне, если я ошибаюсь.

Не могли бы вы привести несколько примеров для bootsrap-vue или объяснить, как использовать решения только для начальной загрузки?

Спасибо

Answer 1

BootstrapVue <b-modal> использует стили CSS / SCSS Bootstrap v4.x для позиционирования модалов.

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

Так что, к сожалению, из коробки вы не можете разместить их абсолютно в окне просмотра.

Вам потребуетсяизмените положение модального диалогового субконтейнера на абсолютное и управляйте левой / верхней позицией на основе перетаскивания.Это не слишком простая задача.Вам нужно будет создать свой собственный заголовок (используя слот с областью видимости для заголовка) и добавить прослушиватели событий для щелчка / перетаскивания и при перетаскивании, затем переключите положение контейнера .modal-dialog в абсолютное значение, а затем вычислите левый / верхнийкоординаты и используемые традиционные корректировки стиля DOM для этого элемента.