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

kgsdhlau  于 2023-08-07  发布在  Vue.js
关注(0)|答案(3)|浏览(139)

有另一个容器被vuetify添加到我试图使用的v-list作为v-menu内容,因为这个容器我不能只是添加一个边距到我的v-list并得到我想要的结果(即在v-menu激活器和菜单体之间有一个小空间)可以任何一个告诉我正确的方法来做到这一点?谢谢你

c0vxltue

c0vxltue1#

content-class=“menu-content”-这就是答案。

w8f9ii69

w8f9ii692#

简单地添加轻推底部在v-菜单

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

字符串
或在v-menu激活器元素中添加填充

<template v-slot:activator="{on}"><span class='pa-2' v-on="on">some text</span></template>

1tu0hz3e

1tu0hz3e3#

我发现了一个可以用来将任何css类附加到菜单主体的 prop :'内容类'

<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>

字符串

相关问题