如何在 Vuetify 扩展面板中设置 Google 字体图标

Question

我在扩展面板内设置 Google 图标时遇到一些困难。通常，您可以根据

docs

，通过

<v-expansion-panel>

组件或 <v-expansion-panel-title-component> 内的塌陷图标或展开图标属性来设置它们。

但是，必须像这样插入图标：

<span class="material-symbols-outlined"> arrow_drop_down </span>

而且我不知道如何让它与 2 个不同的图标一起使用。你不能做的就是简单地说：

<v-expansion-panel-title
expandIcon="arrow_drop_down"
collapseIcon="arrow_drop_up"
>

另外，我尝试使用操作槽，但我不确定如何在此处设置图标

  <v-expansion-panel-title>
    <template v-slot:actions>
        <span class="material-symbols-outlined"> arrow_drop_down </span>
        <span class="material-symbols-outlined"> arrow_drop_up </span>
    </template>

这会给我两个相邻的图标。也许有人可以告诉我插槽的正确使用方法以及如何在那里设置图标。谢谢！

Answer 1

Vuetify 中的槽公开了有关其状态的某些值，如文档中所述：

actions
{
  collapseIcon:
    | string
    | (string | [string, number])[]
    | (new () => any)
    | FunctionalComponent
  disabled: boolean
  expanded: boolean
  expandIcon:
    | string
    | (string | [string, number])[]
    | (new () => any)
    | FunctionalComponent
  readonly: boolean
}

您可以使用“expanded”布尔值编写 v-if v-else 语句，以根据其状态显示不同的项目。

<template #actions="{expanded}">
  <span v-if="expanded" class="material-symbols-outlined"> arrow_drop_down </span>
  <span v-else class="material-symbols-outlined"> arrow_drop_up </span>
</template>