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

Question

有一个fill-height道具可以v-container用来让它填满容器的整个高度。事实证明，这个fill-heightprop 被翻译成 CSS 类：

.fill-height {
    height: 100%;
}

这就是我的意思： 此代码片段可在此处获得。

所以看来我可以使用fill-heightprop 或 setclass=".fill-height"但我想知道 Vuetify 是如何做到的？Vue 中是否有一些功能可以将道具转换为 CSS 类？ 我尝试在 Vuetify 源代码中搜索“fillHeight”，发现在一些公共变量文件中定义了一个道具，但我无法弄清楚它是如何转换为.fill-heightCSS 类的。

标签： javascriptvue.jsvuetify.js

Answer 1

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