如何将Vue Bootstrap模式附加到其他父项？

Question

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

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

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

Answer 1

免责声明：我刚注意到你没有使用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一起使用了，所以为什么不在这里使用它呢。

Update

我发现这个Github问题讨论了同样的问题：https://github.com/bootstrap-vue/bootstrap-vue/issues/1108

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

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

也可以看看：

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