Question

我想在扩展面板页眉具有焦点时将其常规字体样式更改为font-bold……我在文档中找不到任何帮助。我可能想念一些东西...请给我一些主意...在此先感谢...

看下面的例子：

readonly

此行项目仅在具有焦点或打开状态时更改字体

非常感谢您的帮助...

Answer 1

在扩展面板中，您有一个v模型可以同步所有正在打开的面板的索引。您可以使用它来检查当前面板是否打开，然后应用该类。

<v-expansion-panels
  v-model="panel" //Added v-model here
  multiple
  >
  <v-expansion-panel
    v-for="(item,i) in items"
    :key="i"
    >
    <v-expansion-panel-header 
      :class="panel.indexOf(i) != -1 ? 'font-weight-bold': ''" //Applying class here.
    >
      Header {{ item }}
    </v-expansion-panel-header>
    <v-expansion-panel-content>
     Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
    </v-expansion-panel-content>
  </v-expansion-panel>
</v-expansion-panels>

将Vuetify扩展面板标题字体更改为粗体

1 个答案: