在面板标题左侧带有图标的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>

请选中此pen