更新

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允许重定位组件。

另请参阅：

如何将Vue引导程序模式附加到其他父项？

1 个答案:

更新