菜单

v-menu 组件在激活它的元素的位置上展示一个菜单。

用例

请记住将激活菜单的元素放置在 activator 插槽中。

template script

  1. <template>
  2.   <div class="text-center">
  3.     <v-menu offset-y>
  4.       <template v-slot:activator="{ on }">
  5.         <v-btn
  6.           color="primary"
  7.           dark
  8.           v-on="on"
  9.         >
  10.           Dropdown
  11.         </v-btn>
  12.       </template>
  13.       <v-list>
  14.         <v-list-item
  15.           v-for="(item, index) in items"
  16.           :key="index"
  17.           @click=""
  18.         >
  19.           <v-list-item-title>{{ item.title }}</v-list-item-title>
  20.         </v-list-item>
  21.       </v-list>
  22.     </v-menu>
  23.   </div>
  24. </template>
  1. <script>
  2.   export default {
  3.     data: () => ({
  4.       items: [
  5.         { title: 'Click Me' },
  6.         { title: 'Click Me' },
  7.         { title: 'Click Me' },
  8.         { title: 'Click Me 2' },
  9.       ],
  10.     }),
  11.   }
  12. </script>

Menus（菜单） - 图1

API

从下面选择您想要的组件，并查看可用的属性、插槽、事件和函数。

Menus（菜单） - 图2

实战场

template script

  1. <template>
  2.   <v-row align="center">
  3.     <v-row justify="space-around">
  4.       <v-switch v-model="disabled" class="ma-2" label="Disabled"></v-switch>
  5.       <v-switch v-model="absolute" class="ma-2" label="Absolute"></v-switch>
  6.       <v-switch v-model="openOnHover" class="ma-2" label="Open on hover"></v-switch>
  7.       <v-switch v-model="closeOnClick" label="Close on click"></v-switch>
  8.       <v-switch v-model="closeOnContentClick" label="Close on content click"></v-switch>
  9.       <v-switch v-model="offsetX" label="X offset"></v-switch>
  10.       <v-switch v-model="offsetY" label="Y offset"></v-switch>
  11.       <v-switch v-model="value" class="ma-2" label="Value"></v-switch>
  12.     </v-row>
  14.     <v-menu
  15.       v-model="value"
  16.       :disabled="disabled"
  17.       :absolute="absolute"
  18.       :open-on-hover="openOnHover"
  19.       :close-on-click="closeOnClick"
  20.       :close-on-content-click="closeOnContentClick"
  21.       :offset-x="offsetX"
  22.       :offset-y="offsetY"
  23.     >
  24.       <template v-slot:activator="{ on }">
  25.         <v-btn
  26.           color="primary"
  27.           dark
  28.           v-on="on"
  29.         >
  30.           Dropdown
  31.         </v-btn>
  32.       </template>
  33.       <v-list>
  34.         <v-list-item
  35.           v-for="(item, index) in items"
  36.           :key="index"
  37.           @click=""
  38.         >
  39.           <v-list-item-title>{{ item.title }}</v-list-item-title>
  40.         </v-list-item>
  41.       </v-list>
  42.     </v-menu>
  43.   </v-row>
  44. </template>
  1. <script>
  2.   export default {
  3.     data: () => ({
  4.       items: [
  5.         { title: 'Click Me' },
  6.         { title: 'Click Me' },
  7.         { title: 'Click Me' },
  8.         { title: 'Click Me 2' },
  9.       ],
  10.       disabled: false,
  11.       absolute: false,
  12.       openOnHover: false,
  13.       value: false,
  14.       closeOnClick: true,
  15.       closeOnContentClick: true,
  16.       offsetX: false,
  17.       offsetY: true,
  18.     }),
  19.   }
  20. </script>

Menus（菜单） - 图3

示例

下面是一些简单到复杂的例子。

绝对定位

菜单也可以使用absolute属性绝对定位在激活元素的顶部。尝试点击图片上的任何地方。

template script

  1. <template>
  2.   <v-row
  3.     class="d-flex"
  4.     justify="center"
  5.   >
  6.     <v-menu
  7.       v-model="showMenu"
  8.       absolute
  9.       offset-y
  10.       style="max-width: 600px"
  11.     >
  12.       <template v-slot:activator="{ on }">
  13.         <v-card
  14.           class="portrait"
  15.           img="https://cdn.vuetifyjs.com/images/cards/girl.jpg"
  16.           height="300"
  17.           width="600"
  18.           v-on="on"
  19.         ></v-card>
  20.       </template>
  22.       <v-list>
  23.         <v-list-item
  24.           v-for="(item, index) in items"
  25.           :key="index"
  26.           @click=""
  27.         >
  28.           <v-list-item-title>{{ item.title }}</v-list-item-title>
  29.         </v-list-item>
  30.       </v-list>
  31.     </v-menu>
  32.   </v-row>
  33. </template>
  1. <script>
  2.   export default {
  3.     data: () => ({
  4.       showMenu: false,
  5.       items: [
  6.         { title: 'Click Me' },
  7.         { title: 'Click Me' },
  8.         { title: 'Click Me' },
  9.         { title: 'Click Me 2' },
  10.       ],
  11.     }),
  12.   }
  13. </script>

Menus（菜单） - 图4

菜单带有激活器和提示

在新的 v-slot 语法中，嵌套的激活器（比如与同一个激活器按钮相连的 v-menu 和 v-tooltip）需要特殊的设置才能正常工作。注意：同样的语法也适用于其他嵌套的激活器，比如 v-dialog w/ v-tooltip。

template script

  1. <template>
  2.   <div class="text-center">
  3.     <v-menu>
  4.       <template v-slot:activator="{ on: menu }">
  5.         <v-tooltip bottom>
  6.           <template v-slot:activator="{ on: tooltip }">
  7.             <v-btn
  8.               color="primary"
  9.               dark
  10.               v-on="{ ...tooltip, ...menu }"
  11.             >Dropdown w/ Tooltip</v-btn>
  12.           </template>
  13.           <span>Im A ToolTip</span>
  14.         </v-tooltip>
  15.       </template>
  16.       <v-list>
  17.         <v-list-item
  18.           v-for="(item, index) in items"
  19.           :key="index"
  20.           @click=""
  21.         >
  22.           <v-list-item-title>{{ item.title }}</v-list-item-title>
  23.         </v-list-item>
  24.       </v-list>
  25.     </v-menu>
  26.   </div>
  27. </template>
  1. <script>
  2.   export default {
  3.     data: () => ({
  4.       items: [
  5.         { title: 'Click Me1' },
  6.         { title: 'Click Me2' },
  7.         { title: 'Click Me3' },
  8.         { title: 'Click Me4' },
  9.       ],
  10.     }),
  11.   }
  12. </script>

Menus（菜单） - 图5

悬停

菜单可以使用悬停进行访问，而不是点击 open-on-hover 属性。

template script

  1. <template>
  2.   <div class="text-center">
  3.     <v-menu open-on-hover top offset-y>
  4.       <template v-slot:activator="{ on }">
  5.         <v-btn
  6.           color="primary"
  7.           dark
  8.           v-on="on"
  9.         >
  10.           Dropdown
  11.         </v-btn>
  12.       </template>
  14.       <v-list>
  15.         <v-list-item
  16.           v-for="(item, index) in items"
  17.           :key="index"
  18.           @click=""
  19.         >
  20.           <v-list-item-title>{{ item.title }}</v-list-item-title>
  21.         </v-list-item>
  22.       </v-list>
  23.     </v-menu>
  24.   </div>
  25. </template>
  1. <script>
  2.   export default {
  3.     data: () => ({
  4.       items: [
  5.         { title: 'Click Me' },
  6.         { title: 'Click Me' },
  7.         { title: 'Click Me' },
  8.         { title: 'Click Me 2' },
  9.       ],
  10.     }),
  11.   }
  12. </script>

Menus（菜单） - 图6

自定义过渡

Vuetify 带有3个标准过渡，scale、slide-x 和 slide-y。您也可以创建自己的并将其作为过渡参数传递。有关如何构建内置过渡的示例，请访问 here。

template script

  1. <template>
  2.   <v-row justify="space-around">
  3.     <v-menu
  4.       bottom
  5.       origin="center center"
  6.       transition="scale-transition"
  7.     >
  8.       <template v-slot:activator="{ on }">
  9.         <v-btn
  10.           color="primary"
  11.           dark
  12.           v-on="on"
  13.         >
  14.           Scale Transition
  15.         </v-btn>
  16.       </template>
  18.       <v-list>
  19.         <v-list-item
  20.           v-for="(item, i) in items"
  21.           :key="i"
  22.           @click=""
  23.         >
  24.           <v-list-item-title>{{ item.title }}</v-list-item-title>
  25.         </v-list-item>
  26.       </v-list>
  27.     </v-menu>
  29.     <v-menu
  30.       transition="slide-x-transition"
  31.       bottom
  32.       right
  33.     >
  34.       <template v-slot:activator="{ on }">
  35.         <v-btn
  36.           class="deep-orange"
  37.           color="primary"
  38.           dark
  39.           v-on="on"
  40.         >
  41.           Slide X Transition
  42.         </v-btn>
  43.       </template>
  45.       <v-list>
  46.         <v-list-item
  47.           v-for="(item, i) in items"
  48.           :key="i"
  49.           @click=""
  50.         >
  51.           <v-list-item-title>{{ item.title }}</v-list-item-title>
  52.         </v-list-item>
  53.       </v-list>
  54.     </v-menu>
  56.     <v-menu
  57.       transition="slide-y-transition"
  58.       bottom
  59.     >
  60.       <template v-slot:activator="{ on }">
  61.         <v-btn
  62.           class="purple"
  63.           color="primary"
  64.           dark
  65.           v-on="on"
  66.         >
  67.           Slide Y Transition
  68.         </v-btn>
  69.       </template>
  70.       <v-list>
  71.         <v-list-item
  72.           v-for="(item, i) in items"
  73.           :key="i"
  74.           @click=""
  75.         >
  76.           <v-list-item-title>{{ item.title }}</v-list-item-title>
  77.         </v-list-item>
  78.       </v-list>
  79.     </v-menu>
  80.   </v-row>
  81. </template>
  1. <script>
  2.   export default {
  3.     data: () => ({
  4.       items: [
  5.         { title: 'Click Me' },
  6.         { title: 'Click Me' },
  7.         { title: 'Click Me' },
  8.         { title: 'Click Me 2' },
  9.       ],
  10.     }),
  11.   }
  12. </script>

Menus（菜单） - 图7

禁用

您可以禁用菜单。 禁用的菜单无法打开。

template script

  1. <template>
  2.   <div class="text-center">
  3.     <v-menu disabled top offset-y>
  4.       <template v-slot:activator="{ on }">
  5.         <v-btn
  6.           color="primary"
  7.           dark
  8.           v-on="on"
  9.         >
  10.           Dropdown
  11.         </v-btn>
  12.       </template>
  14.       <v-list>
  15.         <v-list-item
  16.           v-for="(item, index) in items"
  17.           :key="index"
  18.           @click=""
  19.         >
  20.           <v-list-item-title>{{ item.title }}</v-list-item-title>
  21.         </v-list-item>
  22.       </v-list>
  23.     </v-menu>
  24.   </div>
  25. </template>
  1. <script>
  2.   export default {
  3.     data: () => ({
  4.       items: [
  5.         { title: 'Click Me' },
  6.         { title: 'Click Me' },
  7.         { title: 'Click Me' },
  8.         { title: 'Click Me 2' },
  9.       ],
  10.     }),
  11.   }
  12. </script>

Menus（菜单） - 图8

X 偏移

菜单可以通过 X 轴偏移，以使激活器可见。

template script

  1. <template>
  2.   <div class="text-center">
  3.     <v-switch v-model="offset" label="X offset"></v-switch>
  4.     <v-menu top :offset-x="offset">
  5.       <template v-slot:activator="{ on }">
  6.         <v-btn
  7.           color="primary"
  8.           dark
  9.           v-on="on"
  10.         >
  11.           Dropdown
  12.         </v-btn>
  13.       </template>
  15.       <v-list>
  16.         <v-list-item
  17.           v-for="(item, index) in items"
  18.           :key="index"
  19.           @click=""
  20.         >
  21.           <v-list-item-title>{{ item.title }}</v-list-item-title>
  22.         </v-list-item>
  23.       </v-list>
  24.     </v-menu>
  25.   </div>
  26. </template>
  1. <script>
  2.   export default {
  3.     data: () => ({
  4.       items: [
  5.         { title: 'Click Me' },
  6.         { title: 'Click Me' },
  7.         { title: 'Click Me' },
  8.         { title: 'Click Me 2' },
  9.       ],
  10.       offset: true,
  11.     }),
  12.   }
  13. </script>

Menus（菜单） - 图9

Status Page

You can check the status of the documentation any time on our OhDear! uptime page.

ads by Vuetify

](https://status.vuetifyjs.com?ref=vuetifyjs.com)

Y 偏移

菜单可以通过 Y 轴偏移，以使激活器可见。

template script

  1. <template>
  2.   <div class="text-center">
  3.     <v-switch v-model="offset" label="Y offset"></v-switch>
  4.     <v-menu top :offset-y="offset">
  5.       <template v-slot:activator="{ on }">
  6.         <v-btn
  7.           color="primary"
  8.           dark
  9.           v-on="on"
  10.         >
  11.           Dropdown
  12.         </v-btn>
  13.       </template>
  15.       <v-list>
  16.         <v-list-item
  17.           v-for="(item, index) in items"
  18.           :key="index"
  19.           @click=""
  20.         >
  21.           <v-list-item-title>{{ item.title }}</v-list-item-title>
  22.         </v-list-item>
  23.       </v-list>
  24.     </v-menu>
  25.   </div>
  26. </template>
  1. <script>
  2.   export default {
  3.     data: () => ({
  4.       items: [
  5.         { title: 'Click Me' },
  6.         { title: 'Click Me' },
  7.         { title: 'Click Me' },
  8.         { title: 'Click Me 2' },
  9.       ],
  10.       offset: true,
  11.     }),
  12.   }
  13. </script>

Menus（菜单） - 图10

点击关闭

失去焦点时可以关闭菜单。

template script

  1. <template>
  2.   <div class="text-center">
  3.     <v-switch v-model="closeOnClick" label="Close on click"></v-switch>
  4.     <v-menu top :close-on-click="closeOnClick">
  5.       <template v-slot:activator="{ on }">
  6.         <v-btn
  7.           color="primary"
  8.           dark
  9.           v-on="on"
  10.         >
  11.           Dropdown
  12.         </v-btn>
  13.       </template>
  15.       <v-list>
  16.         <v-list-item
  17.           v-for="(item, index) in items"
  18.           :key="index"
  19.           @click=""
  20.         >
  21.           <v-list-item-title>{{ item.title }}</v-list-item-title>
  22.         </v-list-item>
  23.       </v-list>
  24.     </v-menu>
  25.   </div>
  26. </template>
  1. <script>
  2.   export default {
  3.     data: () => ({
  4.       items: [
  5.         { title: 'Click Me' },
  6.         { title: 'Click Me' },
  7.         { title: 'Click Me' },
  8.         { title: 'Click Me 2' },
  9.       ],
  10.       closeOnClick: true,
  11.     }),
  12.   }
  13. </script>

Menus（菜单） - 图11

点击内容后关闭

您可以配置单击 v-menu 的内容时是否应关闭它。

template script

  1. <template>
  2.   <div class="text-center">
  3.     <v-switch v-model="closeOnContentClick" label="Close on content click"></v-switch>
  4.     <v-menu top :close-on-content-click="closeOnContentClick">
  5.       <template v-slot:activator="{ on }">
  6.         <v-btn
  7.           color="primary"
  8.           dark
  9.           v-on="on"
  10.         >
  11.           Dropdown
  12.         </v-btn>
  13.       </template>
  15.       <v-list>
  16.         <v-list-item
  17.           v-for="(item, index) in items"
  18.           :key="index"
  19.           @click=""
  20.         >
  21.           <v-list-item-title>{{ item.title }}</v-list-item-title>
  22.         </v-list-item>
  23.       </v-list>
  24.     </v-menu>
  25.   </div>
  26. </template>
  1. <script>
  2.   export default {
  3.     data: () => ({
  4.       items: [
  5.         { title: 'Click Me' },
  6.         { title: 'Click Me' },
  7.         { title: 'Click Me' },
  8.         { title: 'Click Me 2' },
  9.       ],
  10.       closeOnContentClick: true,
  11.     }),
  12.   }
  13. </script>

Menus（菜单） - 图12

没有激活时的绝对定位

菜单也可以通过 absolute 属性跟 position-x 和 position-y 属性一起使用。尝试右键单击图像上的任意位置。

template script style

  1. <template>
  2.   <div>
  3.     <v-row class="flex" justify="center">
  4.       <v-card
  5.         :ripple="false"
  6.         class="portrait"
  7.         img="https://cdn.vuetifyjs.com/images/cards/girl.jpg"
  8.         height="300px"
  9.         @click="show"
  10.       ></v-card>
  11.     </v-row>
  13.     <v-menu
  14.       v-model="showMenu"
  15.       :position-x="x"
  16.       :position-y="y"
  17.       absolute
  18.       offset-y
  19.     >
  20.       <v-list>
  21.         <v-list-item
  22.           v-for="(item, index) in items"
  23.           :key="index"
  24.           @click=""
  25.         >
  26.           <v-list-item-title>{{ item.title }}</v-list-item-title>
  27.         </v-list-item>
  28.       </v-list>
  29.     </v-menu>
  30.   </div>
  31. </template>
  1. <script>
  2.   export default {
  3.     data: () => ({
  4.       showMenu: false,
  5.       x: 0,
  6.       y: 0,
  7.       items: [
  8.         { title: 'Click Me' },
  9.         { title: 'Click Me' },
  10.         { title: 'Click Me' },
  11.         { title: 'Click Me 2' },
  12.       ],
  13.     }),
  15.     methods: {
  16.       show (e) {
  17.         e.preventDefault()
  18.         this.showMenu = false
  19.         this.x = e.clientX
  20.         this.y = e.clientY
  21.         this.$nextTick(() => {
  22.           this.showMenu = true
  23.         })
  24.       },
  25.     },
  26.   }
  27. </script>
  1. <style scoped>
  2. .portrait.v-card {
  3.   margin: 0 auto;
  4.   max-width: 600px;
  5.   width: 100%;
  6. }
  7. </style>

Menus（菜单） - 图13

菜单

菜单可以放在几乎任何组件中

template script

  1. <template>
  2.   <v-row>
  3.     <v-col cols="12" sm="6" offset-sm="3">
  4.       <v-card height="200px">
  5.         <v-card-title class="blue white--text">
  6.           <span class="headline">Menu</span>
  8.           <v-spacer></v-spacer>
  10.           <v-menu bottom left>
  11.             <template v-slot:activator="{ on }">
  12.               <v-btn
  13.                 dark
  14.                 icon
  15.                 v-on="on"
  16.               >
  17.                 <v-icon>mdi-dots-vertical</v-icon>
  18.               </v-btn>
  19.             </template>
  21.             <v-list>
  22.               <v-list-item
  23.                 v-for="(item, i) in items"
  24.                 :key="i"
  25.                 @click=""
  26.               >
  27.                 <v-list-item-title>{{ item.title }}</v-list-item-title>
  28.               </v-list-item>
  29.             </v-list>
  30.           </v-menu>
  31.         </v-card-title>
  33.         <v-card-text>Lorem Ipsum</v-card-text>
  34.       </v-card>
  35.     </v-col>
  36.   </v-row>
  37. </template>
  1. <script>
  2.   export default {
  3.     data: () => ({
  4.       items: [
  5.         { title: 'Click Me' },
  6.         { title: 'Click Me' },
  7.         { title: 'Click Me' },
  8.         { title: 'Click Me 2' },
  9.       ],
  10.     }),
  11.   }
  12. </script>

Menus（菜单） - 图14

弹出菜单

菜单可以配置为在打开时为静态菜单，使其充当弹出菜单。 当菜单内容中有多个交互式项目时，这很有用。

template script

  1. <template>
  2.   <div class="text-center">
  3.     <v-menu
  4.       v-model="menu"
  5.       :close-on-content-click="false"
  6.       :nudge-width="200"
  7.       offset-x
  8.     >
  9.       <template v-slot:activator="{ on }">
  10.         <v-btn
  11.           color="indigo"
  12.           dark
  13.           v-on="on"
  14.         >
  15.           Menu as Popover
  16.         </v-btn>
  17.       </template>
  19.       <v-card>
  20.         <v-list>
  21.           <v-list-item>
  22.             <v-list-item-avatar>
  23.               <img src="https://cdn.vuetifyjs.com/images/john.jpg" alt="John">
  24.             </v-list-item-avatar>
  26.             <v-list-item-content>
  27.               <v-list-item-title>John Leider</v-list-item-title>
  28.               <v-list-item-subtitle>Founder of Vuetify.js</v-list-item-subtitle>
  29.             </v-list-item-content>
  31.             <v-list-item-action>
  32.               <v-btn
  33.                 :class="fav ? 'red--text' : ''"
  34.                 icon
  35.                 @click="fav = !fav"
  36.               >
  37.                 <v-icon>mdi-heart</v-icon>
  38.               </v-btn>
  39.             </v-list-item-action>
  40.           </v-list-item>
  41.         </v-list>
  43.         <v-divider></v-divider>
  45.         <v-list>
  46.           <v-list-item>
  47.             <v-list-item-action>
  48.               <v-switch v-model="message" color="purple"></v-switch>
  49.             </v-list-item-action>
  50.             <v-list-item-title>Enable messages</v-list-item-title>
  51.           </v-list-item>
  53.           <v-list-item>
  54.             <v-list-item-action>
  55.               <v-switch v-model="hints" color="purple"></v-switch>
  56.             </v-list-item-action>
  57.             <v-list-item-title>Enable hints</v-list-item-title>
  58.           </v-list-item>
  59.         </v-list>
  61.         <v-card-actions>
  62.           <v-spacer></v-spacer>
  64.           <v-btn text @click="menu = false">Cancel</v-btn>
  65.           <v-btn color="primary" text @click="menu = false">Save</v-btn>
  66.         </v-card-actions>
  67.       </v-card>
  68.     </v-menu>
  69.   </div>
  70. </template>
  1. <script>
  2.   export default {
  3.     data: () => ({
  4.       fav: true,
  5.       menu: false,
  6.       message: false,
  7.       hints: true,
  8.     }),
  9.   }
  10. </script>

Menus（菜单） - 图15

无障碍

默认情况下，v-menu 组件被 detached 并移动到你的应用程序的根目录下。为了正确地支持 将动态内容插入到 DOM，你必须_使用 attach prop。这将确保在按 tab 键时，焦点从激活器转移到内容上。