如何在 vuetify 的 v-menu 下为 v-list 元素添加自定义边距答案

【问题标题】：How can I add custom margin to the v-list element under v-menu in vuetify如何在 vuetify 的 v-menu 下为 v-list 元素添加自定义边距
【发布时间】：2022-07-19 16:31:31
【问题描述】：

vuetify 正在将另一个容器添加到 v-list 我试图用作 v-menu 内容，因为这个容器我不能只在我的 v-list 中添加边距并得到结果想要（即在 v-menu 激活器和菜单主体之间留出一点空间）任何人都可以告诉我正确的方法吗？谢谢

【问题讨论】：

标签： vue.js vuetify.js

【解决方案1】：

我发现了一个可以用来将任何 css 类附加到菜单主体的道具：'content-class'

<template>
  <div>
    <v-menu v-model="menu"
            content-class="menu-content"
            offset-y>
      <template v-slot:activator="{ on, attrs }">
        <v-btn v-bind="attrs"
               v-on="on" depressed>
          <v-icon>
            mdi-menu
          </v-icon>
          <span class="mr-1"> Category</span>
          <v-icon
            right
            color="#9b9b9b"
          >
            mdi-chevron-down
          </v-icon>
        </v-btn>
      </template>
            <v-list>
    <v-list-item
      v-for="(item, i) in menuArray"
      :key="i"
    >
      <v-list-item-title>{{ item.name }}</v-list-item-title>
    </v-list-item>
  </v-list>
    </v-menu>
</template>
<style lang='scss' scoped>
.menu-content {
  margin-top: 100px
}
</style>

【讨论】：

【解决方案2】：

只需在 v-menu 中添加微调底部

<v-menu nudge-bottom='3'></v-menu>

【讨论】：