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

Posted 2023-02-22

【中文标题】Vuetify 扩展面板，面板标题左侧带有图标

【英文标题】：Vuetify Expansion Panels with icon on the left side of Panel's header

【发布时间】：2020-04-29 23:02:56

【问题描述】：

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

CodePen 仅显示如何添加图标的方法，但在右侧。我已经尝试了下面的 2 个 sn-ps，但没有任何成功。

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

和

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

两者都没有预期的结果。

【问题讨论】：

我的回答能解决您的问题吗？如果不告诉我确切的问题

@BoussadjraBrahim 是的，它确实有效。已采纳，谢谢！

【参考方案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

【讨论】：

这应该是公认的答案，它工作正常

我不需要旋转图标，这就是我接受这个答案的原因，它解决了我的问题。但是，两者都赞成:)

【参考方案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