Question

我正在Vuejs中编写一个经典的模式组件，该组件由包装，深色覆盖层（覆盖其后面的整个页面）和实际内容组成。

挑战在于我想写这篇

<button>Trigger Modal 1</button>
<Modal :id="modal1">
    Some content
</Modal>

<button>Trigger Modal 2</button>
<Modal :id="modal2">
    More content
</Modal>

并获取以下呈现的代码

<button>Trigger Modal 1</button>
<button>Trigger Modal 2</button>

<div class="modal-wrapper">
   <div id="modal1">Some content</div>
   <div id="modal2">More content</div>
</div>

之所以这样做，是因为我不想重复每个模式的任何常见元素，因为页面上可能有很多它们。

到目前为止我尝试过的事情

在beforeMount上检查这是否是第一个呈现的Modal组件（通过检查DOM中的.modal-wrapper），如果它在其中，则将当前实例附加到那里，如果不添加使用document.createElement创建它。但是我得到的是每个模态都有一个.modal-wrapper元素，这可能是因为渲染时出现的所有元素都立即触发了beforeMount事件。

有什么想法可以实现这一目标吗？

在一个父组件中动态包装一个组件的多个实例

0 个答案: