将按钮移近展开按钮答案

【问题标题】：Move button closer to the expand button将按钮移近展开按钮
【发布时间】：2023-01-14 06:26:21
【问题描述】：

在 Vuetify 中，如果我想将删除按钮移近展开按钮。
我怎么做？

<v-expansion-panel-header>
  {{ vehicle.VIN }}
  <v-icon v-if="type == 'saved'" color="teal"> mdi-check </v-icon>
  <v-btn
    text
    v-if="type == 'saved'"
    color="red"
    @click="remove(index, type)"
  >
    DELETE
  </v-btn>
</v-expansion-panel-header>

【问题讨论】：

您会推荐使用行列来执行此操作吗？
@NehaSoni 是的，我对此持开放态度。

标签： vue.js vuejs2 vuetify.js

【解决方案1】：

您可以使用 Vuetify 帮助程序类重置删除按钮上的 flex-grow 属性。

class="flex-grow-0"

片段:

<div id="app">
  <v-app>
    <v-expansion-panel-header>
      {{ vehicle.VIN }}
      <v-icon v-if="type == 'saved'" color="teal"> mdi-check </v-icon>
      <v-btn
        class="flex-grow-0"
        text
        v-if="type == 'saved'"
        color="red"
        @click="remove(index, type)"
      >
        DELETE
      </v-btn>
    </v-expansion-panel-header>
  </v-app>
</div>

验证文档: https://vuetifyjs.com/en/styles/flex/#flex-grow-and-shrink

【讨论】：

完美地工作，我在课堂上不知道这个构建，谢谢。
不错的@code-8，请将答案标记为例外？
如果我删除复选标记，只有删除按钮，该类将不起作用。我应该改用什么课程？
添加一个 <v-spacer> 组件而不是 codepen.io/alexpetergill/pen/ZERmJyz/…
这是一个解决方案，但 <v-spacer> 有时不起作用。根据父级的宽度，其结果是不确定的。

【解决方案2】：

也可以使用行和列来实现-

<v-expansion-panel-header>
    <v-row no-gutters>
        <v-col>
            hello
        </v-col>
        <v-col>
            <v-icon color="teal"> mdi-check </v-icon>
        </v-col>
        <v-col align="right">
            <v-btn text color="red">
                DELETE
            </v-btn>
        </v-col>
    </v-row>
 </v-expansion-panel-header>

【讨论】：

谢谢@Neha 让我试试。 ??