在默认插槽中动态更改 v-text-field 中的类

Posted 2023-02-23

【中文标题】在默认插槽中动态更改 v-text-field 中的类

【英文标题】：Dynamically changing class in v-text-field in default slot

【发布时间】：2020-09-20 01:32:10

【问题描述】：

我正在尝试根据文本的长度动态更改 v-text-field 默认插槽中的字体大小。但是，似乎 v-text-field 忽略了我在该部分中指定的任何规范。

这里是代码

        <v-text-field
          v-model="attr.name"
          hide-details
          :readonly="true"
          class="core-select"
          label="Core Attribute"
        >
          <template
            v-slot:default
          >
            <div :class="attrNameStyle[0]">
               attr.name 
            </div>
          </template>
        </v-text-field>

我已经验证 attrNameStyle[0] 设置正确，但是该样式永远不会应用于默认插槽。我可以通过这个 CSS 类 .v-text-field__slot input ... 更改输入槽的外观，但是我无法动态更新该 CSS。

感谢您的帮助！

编辑：添加更多上下文。

.core-select 
  width: 180px;


.short-core-select 
  font-size: 12px;

attrNameStyle[0] 设置为 '' 或 'short-core-select'。

【问题讨论】：

你能提供更多代码吗？ CSS 类 core-select 和 attrNameStyle[0] 出现的任何内容都可能发生冲突。

添加了更多上下文。

【参考方案1】：

由于v-text-field__slot 有效，您可以从更高级别编辑该 CSS。

<v-text-field
      v-model="attr.name"
      hide-details
      hide-details
      class="core-select"
      :class="attrNameStyle[0]"
      label="Core Attribute"
    >
      <template>
        <div>
           attr.name 
        </div>
      </template>
    </v-text-field>

<style>
  .short-core-select .v-text-field__slot 
    font-size: 12px;
  
</style>