如何将 Vue Bootstrap 模态附加到不同的父级？

Question

目前使用的 Vue Bootstrap Modal 显示不正确，因为它的父级（或者更确切地说是树上的祖先）定义了 overflow:hidden。

有没有办法让模态附加到 body 元素？

当然，我可以重新组织我的模板，但这个模式在逻辑上属于它当前定义的组件，我不想破坏它。

Answer 1

免责声明： 我刚刚注意到您使用的不是原版 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

显然，在 Vue 组件外重新定位 DOM 元素有时会导致问题。请参阅问题以获取更多详细信息。

还有 PortalVue 允许重新定位组件。

另请参阅：

https://forum.vuejs.org/t/is-it-bad-practice-to-manually-move-a-components-element-to-a-different-position-in-the-dom/9026/6

如何将 Vue Bootstrap 模态附加到不同的父级？

How to attach a Vue Bootstrap Modal to a different parent?

bootstrap-modal

vue.js

bootstrap-4

vuejs2

bootstrap-vue

更新