右侧的 v-card-actions 按钮

v-card-actions 按钮是一个 Vue Material 中的组件，它可以放置在 v-card 中卡片的一侧，用来放置一系列动作按钮。

如何使用

在 Vue 模板中，可以这样使用 v-card-actions：

<v-card>
  <v-card-text>Some content...</v-card-text>
  <v-card-actions>
    <v-btn>Button 1</v-btn>
    <v-btn>Button 2</v-btn>
  </v-card-actions>
</v-card>

样式

v-card-actions 默认会在卡片右侧放置一排按钮，每个按钮之间会有一定距离。可以通过属性 align-end 来将它们右对齐，或者使用 justify-space-between 将它们平均分配到一行中间。

<v-card>
  <v-card-actions align-end>
    <v-btn>Button 1</v-btn>
    <v-btn>Button 2</v-btn>
  </v-card-actions>
</v-card>

<v-card>
  <v-card-actions justify-space-between>
    <v-btn>Button 1</v-btn>
    <v-btn>Button 2</v-btn>
  </v-card-actions>
</v-card>

功能

v-card-actions 可以包含任意数量的 v-btn 或 v-icon 按钮，这些按钮可以执行任何动作，从显示菜单到触发函数调用都可以。

<v-card>
  <v-card-actions align-end>
    <v-btn color="primary">Save</v-btn>
    <v-menu>
      <template #activator="{ on }">
        <v-btn v-on="on">Actions</v-btn>
      </template>
      <v-list>
        <v-list-item v-for="(item, i) in items" :key="i">
          <v-list-item-title v-text="item"></v-list-item-title>
        </v-list-item>
      </v-list>
    </v-menu>
  </v-card-actions>
</v-card>

总结

v-card-actions 按钮是一个实用的组件，可以让你轻松地将一组操作按钮放置在卡片的一侧，非常适合创建需要多个按钮的应用程序。