【问题标题】: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 让我试试。 ??
猜你喜欢
  • 1970-01-01
  • 2017-11-15
  • 2021-06-17
  • 1970-01-01
  • 2018-09-20
  • 2014-09-02
  • 2021-09-17
  • 2020-06-03
  • 1970-01-01
相关资源
最近更新 更多