Vuetify card 和 sheet 有啥区别？

Posted 2023-02-22

【中文标题】Vuetify card 和 sheet 有啥区别？

【英文标题】：What's the difference between Vuetify card and sheet?Vuetify card 和 sheet 有什么区别？

【发布时间】：2019-11-06 15:27:04

【问题描述】：

Vuetify docs 定义 sheet 如下：

v-sheet 旨在为 Vuetify 中的其他纸质组件提供动力。它旨在用作低级组件。

card根据docs是这样的：

v-card 组件是一个通用组件，可用于从面板到静态图像的任何内容。

对我（不是JS 人）来说，它们看起来非常相似。它们可以互换吗？什么时候使用一个而不是另一个？可以举例说明吗？

【问题讨论】：

文档有示例，为什么这些示例还不够？

@depperm 好吧，如果在 v-sheet 示例中（在 codepen 上）我将所有 v-sheet 标记替换为 v-card - 我看不出有什么不同。

当我右键单击v-card 并检查它时，它在内部使用v-sheet，因此您会得到类似的结果也就不足为奇了。正如文档所说，它是一个“低级组件”——换句话说，它主要用于制作 other 组件。

@ceejayoz 谢谢，这是我的假设。令人困惑的部分是..power other paper components..。 Vuetify 文档没有声明 paper components 是什么。

【参考方案1】：

VSheet 和 VCard 看起来非常相似并且非常相似，因为与 vuetify 中的大多数其他组件一样，VCard 是由 VSheet 基础制成的。

使用VSheet 的一个很好的用例是创建您自己的自定义组件。假设您对 VCard 的外观和感觉不满意，并且想要创建自己的变体，您可以使用 VSheet 作为基础。

【参考方案2】：

你的问题听起来有点像“html div 和 section 标签之间有什么区别？”

你懂我吗？我是语义的东西。

“低级”组件告诉我你可以在v-card 中使用v-sheet，但你不应该反其道而行之。

就像将span 放入p 是可以的，但换一种方式是错误的做法。

希望对你有帮助 ;-)