Как прикрепить Vue Bootstrap Modal к другому родителю? - PullRequest
Новая
       62

Как прикрепить Vue Bootstrap Modal к другому родителю?

0 голосов
/ 26 февраля 2019

В настоящее время используется Vue Bootstrap Modal , который не отображается должным образом, потому что его родитель (или, скорее, предок вверх по дереву) имеет overflow:hidden.

Есть ли способ модальной привязки, скажем, к элементу body?

Конечно, я мог бы реорганизовать свои шаблоны, но этот модальный логически принадлежит компоненту, в котором он определен в данный момент, и я не хочу его нарушать.

1 Ответ

0 голосов
/ 26 февраля 2019

Отказ от ответственности: Я только что заметил, что вы не используете vanilla Bootstrap, а его воплощение Vue.js.Я все равно оставлю это, поскольку это может помочь.

Я не вижу встроенного способа сделать это в Vue.Рассматривали ли вы что-то подобное в своем компоненте: 

import $ from 'jquery';

// ...

mounted() {
  $(this.$refs.myModal).appendTo('body');
  // I guess you can still drive this.$refs.myModal even though it's not a child of this.$el
  // after this point?
  // Also cache this.$refs.myModal somewhere for below
},

updated() {
  // Check if this.$refs.myModal is the same element as the cached element
  // If not, it has been recreated so remove the cached node from "body" and:
  $(this.$refs.myModal).appendTo('body');
},

beforeDestroy() {
  $(this.$refs.myModal).appendTo(this.$el);
},

jQuery, конечно, не требуется, но вы уже используете его с Bootstrap, так почему бы не использовать его здесь.

Обновление

Я обнаружил, что эта проблема Github обсуждает эту же проблему: https://github.com/bootstrap-vue/bootstrap-vue/issues/1108

Очевидно, что перемещение элементов DOM за пределы компонентов Vue может иногда вызывать проблемы.См. Проблему для получения более подробной информации.

Также есть PortalVue , позволяющий перемещать компоненты.

См. Также:

...