Vuetify 如何将 fill-height 属性转换为 CSS “.fill-height” 类？答案

【问题标题】：How Vuetify translates fill-height prop to CSS ".fill-height" class?Vuetify 如何将 fill-height 属性转换为 CSS “.fill-height” 类？
【发布时间】：2021-05-30 07:12:49
【问题描述】：

我可以在v-container 上使用一个fill-height 道具，使其填满容器的整个高度。原来这个fill-height prop被翻译成了CSS类：

.fill-height {
    height: 100%;
}

这就是我的意思：此代码 sn-p 可用here。

所以看来我可以使用 fill-height 属性或设置 class=".fill-height" 但我想知道 Vuetify 是如何做到这一点的？ Vue 中是否有一些功能可以将道具转换为 CSS 类？ I tried searching through Vuetify source code for "fillHeight" 并且我发现在一些公共变量文件中定义了一个 prop，但我无法弄清楚它是如何转换为 .fill-height CSS 类的。

【问题讨论】：

标签： javascript vue.js vuetify.js

【解决方案1】：

VContainer 组件简单地将所有属性视为 CSS 类（slot 和 data-xxx 属性除外）- 查看源代码 https://github.com/vuetifyjs/vuetify/blob/78567e4e72973e2ff2acdcf3707c093bb9f0725c/packages/vuetify/src/components/VGrid/VContainer.ts#L29

【讨论】：

感谢您的回答。如果这些事情记录在 Vuetify 文档中，那就太好了，但它们没有:(
是的，Vuetify 文档有问题。以前可以正常工作的页面突然开始显示错误 404，组件文档中提到的 props 实际上被组件忽略，props 的描述很糟糕（或没有描述）等等。