标题末尾的 vuetify 按钮/图标

【问题标题】：vuetify button/icon at the end of the heading标题末尾的 vuetify 按钮/图标
【发布时间】：2021-04-29 07:27:59
【问题描述】：

我想在我的标题旁边有一个小信息按钮/图标。问题是它显示在第一行的末尾，而我想将它显示在整个标题的末尾。

"This is an example (info icon)
heading" //this is how it currently looks 

"This is an example
heading" (info icon) //this is how it should look

I'm using vuetify

```
               <div style="display:flex;">
                <p >{{ heading }}</p>
                 <div v-if="help">
                  <v-menu
                  offset-x
                  min-width="220"
                  rounded="lg"
                  >
                  <template v-slot:activator="{on }">
                  <v-btn v-on="on" icon class="mt-n2" >
                     <v-icon  color="black" style="transform: rotate(180deg);">mdi-alert-circle-outline</v-icon>
                  </v-btn>
                  </template>
                </v-menu>
               </div>
             </div>

【问题讨论】：

标签： javascript css button icons vuetify.js

【解决方案1】：

首先使用
<v-icon color="black">mdi-information-outline</v-icon>
而不是
<v-icon color="black" style="transform: rotate(180deg);">mdi-alert-circle-outline</v-icon>

其次，我总是使用 justify-space-between 来获得这个结果，但 Vuetify.js 总是建议使用 <v-spacer>

顺便说一句，我想出了这个：

<v-card-title>
  {{ heading }}
  <v-spacer></v-spacer> <--- Place a spacer to separate your item
  <v-menu offset-y min-width="220" v-if="help">
    <template v-slot:activator="{ on }">
      <v-btn v-on="on" icon small class="mt-n2">
        <v-icon>mdi-information-outline</v-icon>
      </v-btn>
    </template>
    <v-card>
      <v-card-text> Some helpful text </v-card-text>
    </v-card>
  </v-menu>
</v-card-title>

结果：

在下图中，我使用的类 justify-space-between 没有分隔符，结果相似

【讨论】：