如何将 标签设置为 Vuetify 输入标签的样式？答案

【问题标题】：How can I style a tag as a Vuetify input label?如何将 标签设置为 Vuetify 输入标签的样式？
【发布时间】：2023-01-09 15:48:10
【问题描述】：

我想将  样式设置为 Vuetify 输入标签。

样式为“常规”标签。有这样的东西吗？

<span class="vuetify-label">Regular</span>

【问题讨论】：

你可以打开你的浏览器 devtools，找到一个很酷的类名，主要用 CSS 自己设计它。否则，请检查 Vuetify 端是否有专用的“样式”道具或类似道具，但如果不存在，请不要担心太多并使用 CSS。
@kissu 使用假设的 Vuetify 类背后的想法是在 Vuetify 更新时保持它们对齐。
然后，自定义的仍然是最好的方法，因为您不需要遵循任何重大更改。你可以保持自己的风格+偏好而不依赖他们的框架。
@kissu 我不需要有自己的风格。我想依赖框架。
如果框架没有提供这样的东西，解决方案是使用？自定义 CSS 选择器并应用一些自制样式。不确定您在这里期待什么不同。

标签： vuejs2 vuetify.js

【解决方案1】：

您可以根据需要使用slot="label" 进行扩展。这是工作示例

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  
})

.vuetify-label {
  color: blue;
}

<link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>
<div id="app">
  <v-app id="inspire">
    <v-form>
      <v-container>
        <v-row>
          <v-col
            cols="12"
            sm="6"
            md="3"
          >
            <v-text-field
              label="Regular"
            >
              <template slot="label">
              <span class="vuetify-label">Your custem label</span>
              </template>
            </v-text-field>
          </v-col>
  
        
        </v-row>
      </v-container>
    </v-form>
  </v-app>
</div>

【讨论】：

这不是我需要的。我只需要一个样式为 Vuetify 输入标签的随机 标签。只有标签。
如果你在一个框架中工作，你必须使用它的功能..你可以使用 prop 来扩展..否则，你可以编写自己的类并将它们用作普通的 html/css
使用假设的 Vuetify 类背后的想法是在框架更新时使我的 标签样式与 Vuetify 保持一致。需要说明的是，我的 标签和 <v-text-field> 完全断开了连接；他们只有标签样式的共同点。

【解决方案2】：

您可以使用 Vuetify 的 SASS 变量来执行此操作。只需执行以下操作 -

首先，在当前组件中导入输入 API 的 SASS 文件，如下所示 -

@import "~vuetify/src/components/VInput/_variables.scss";

通过执行上述操作，所有 SASS 变量在当前组件中都可用，您可以将它们用于您的自定义元素。完整的例子是——

<style lang="scss">
@import "~vuetify/src/components/VInput/_variables.scss";

.vuetify-label {
    height: $input-label-height !important;
    letter-spacing: $input-label-letter-spacing !important;
}
</style>

所有可用输入 SASS 变量的列表是 here。

您还可以查看 v-text-field's SASS variables 并根据需要使用它们。

【讨论】：