面板标题左侧带有图标的 Vuetify 扩展面板

Question

Vue.js 的 Vuetify 提供了一种向扩展面板添加图标的方法 ( https://vuetifyjs.com/en/components/expansion-panels#custom-icon )。但是，我希望将它们放在标题的左侧，如下面的屏幕截图所示。

该CodePen只显示方式如何添加图标，但在右侧。我已经尝试了下面的 2 个片段，但没有任何成功。

<template v-slot:actions>
  <v-icon left>mdi-check</v-icon>
</template>

和

<v-icon left>mdi-check</v-icon>

两者都没有预期的结果。

Answer 1

接受的答案有效，但它破坏了图标旋转。更好的方法可能是使用顺序：

<template>
    <v-expansion-panel-header>
        <template v-slot:actions>
            <v-icon class="icon">$expand</v-icon>
        </template>
        <span class="header">{{ headerText }}</span>
    </v-expansion-panel-header>
</template>

<style>
    .icon {
        order: 0;
    }

    .header {
        order: 1;
    }
</style>

https://github.com/vuetifyjs/vuetify/issues/9698#issuecomment-628132033

Answer 2

您可以通过将标题面板标题和图标包装在一个 div 中来实现相同的结果，如下所示：

 <v-expansion-panel-header class="justify-self-start" disable-icon-rotate>
     <div>
          <v-icon color="error">mdi-alert-circle</v-icon>
             <span>Item</span>
     </div>

</v-expansion-panel-header>

请检查这支笔