vue.js - 为卡片创建模式

Question

我有一个带有一系列卡片的页面。每张卡片都有一个按钮来打开带有一些选项的模式。哪种方式在为模态服务方面会更有效？

1. 将模态的 HTML 存储在页面上一次。从每张卡片发出一个事件并加载单个模式（传入任何相关数据，例如发出事件的卡片 ID）。
2. 每张卡片都有一个模态，但将其隐藏起来，v-if因此不会被渲染。无论如何，模态不太可能经常打开。
3. 还有什么？

谢谢你的想法。

标签： vue.jsvuejs2

Answer 1

在我看来，无论您采用哪种方式，一堆卡片和对话框都不太可能出现严重的性能问题。您提出的两种解决方案都可以很好地发挥性能。这意味着您可以根据其他非常重要的因素做出决定。

我相信第二种解决方案更可取，因为它更好地封装了行为，并且不会将显示模式对话框的责任推给所有卡片的父级。它也可以更好地扩展，因为如果您可以说稍微不同类型的模态对话框，您可以选择在不同的卡片中轻松使用不同的对话框组件。您不必处理给父级更多的责任（必须决定显示哪个对话框组件），或者处理一个对话框组件，因为需要显示不同类型的内容而不得不做太多事情。

我还建议您查看portal-vue，它允许您将对话框用作卡片的一部分，同时在 DOM 中任何您需要的地方渲染它们。例如在应用程序的根元素的末尾（甚至在您的父组件中）。