Menu 导航菜单

为页面和功能提供导航的菜单列表。

何时使用

导航菜单是一个网站的灵魂，用户依赖导航在各个页面中进行跳转。一般分为顶部导航和侧边导航，顶部导航提供全局性的类目和功能，侧边导航提供多级结构来收纳和排列网站架构。更多布局和导航的范例可以参考：常用布局。

代码演示

顶部导航

水平的顶部导航菜单。

  1. <template>                   
  2.     <v-menu mode="horizontal" :data="horizontalMnueData"  @item-click="itemclick"></v-menu>
  3. </template> 
  4. <script>
  5. export default {
  6.     data:()=> ({
  7.         horizontalMnueData: [{
  8.             name: '导航一',
  9.             icon: 'mail'
  10.         },{
  11.             name: '导航二',
  12.             icon: 'appstore',
  13.             disabled: true
  14.         },{
  15.             name: '导航三-子菜单',
  16.             icon: 'setting',
  17.             groups: [{
  18.                 groupName: "分组1",
  19.                 list: [{
  20.                     name: "选项1"
  21.                 },{
  22.                     name: "选项2"
  23.                 }]
  24.             }, {
  25.                 groupName: "分组2",
  26.                 list: [{
  27.                     name: "选项3"
  28.                 },{
  29.                     name: "选项4"
  30.                 }]
  31.             }]
  32.         },{
  33.             name: '导航四-链接',
  34.             href: "http://www.alipay.com/",
  35.             target: '_blank'
  36.         }]
  37.     })
  38. }
  39. </script>

内嵌菜单

垂直菜单，子菜单内嵌在菜单区域。

  1. <template>                
  2.     <v-menu style="width:240px" mode="inline" :data="inlineMenuData"></v-menu>
  3. </template>
  4. <script>
  5. export default {
  6.     data:()=> ({
  7.         inlineMenuData: [{
  8.             name: '导航一',
  9.             icon: 'mail',
  10.             groups: [{
  11.                 groupName: "分组1",
  12.                 list: [{
  13.                     name: "选项1"
  14.                 },{
  15.                     name: "选项2"
  16.                 }]
  17.             }, {
  18.                 groupName: "分组2",
  19.                 list: [{
  20.                     name: "选项3"
  21.                 },{
  22.                     name: "选项4"
  23.                 }]
  24.             }]
  25.         },{
  26.             name: '导航二',
  27.             icon: 'appstore',
  28.             children: [{
  29.                 name: "选项5"
  30.             },{
  31.                 name: "选项6"
  32.             },{
  33.                 name: "三级导航",
  34.                 children: [{
  35.                     name: "选项7"
  36.                 },{
  37.                     name: "选项8"
  38.                 }]
  39.             }]
  40.         },{
  41.             name: '导航三',
  42.             icon: 'setting',
  43.             children: [{
  44.                 name: "选项9"
  45.             },{
  46.                 name: "选项10"
  47.             },{
  48.                 name: "选项11"
  49.             },{
  50.                 name: "选项12"
  51.             }]
  52.         }]
  53.     })
  54. }
  55. </script>

缩起内嵌菜单

你可以在 Layout 里查看侧边布局结合的完整示例

  1. <template>
  2.     <div style="width:240px">
  3.         <v-button type="primary" @click="collapsed = !collapsed" style="margin-bottom: 16px">
  4.             <v-icon :type="collapsed ? 'menu-unfold' : 'menu-fold'"></v-icon>
  5.         </v-button>
  6.         <v-menu mode="inline" :data="collapsedMenuData" theme="dark" :inline-collapsed="collapsed"></v-menu>
  7.     <div>
  8. </template>
  9. <script>
  10. export default {
  11.     data:()=> ({
  12.         collapsed: false,
  13.         collapsedMenuData: [{
  14.             name: '选项1',
  15.             icon: 'mail',
  16.         }, {
  17.             name: '选项2',
  18.             icon: 'appstore',
  19.         }, {
  20.             name: '选项3',
  21.             icon: 'lock',
  22.         }, {
  23.             name: '导航1',
  24.             icon: 'setting',
  25.             children: [{
  26.                 name: "选项4"
  27.             },{
  28.                 name: "选项5"
  29.             },{
  30.                 name: "选项6"
  31.             },{
  32.                 name: "选项7"
  33.             }]
  34.         }, {
  35.             name: '导航2',
  36.             icon: 'desktop',
  37.             children: [{
  38.                 name: "选项8"
  39.             },{
  40.                 name: "选项9"
  41.             },{
  42.                 name: "选项10"
  43.             }]
  44.         }]
  45.     })
  46. }
  47. </script>

垂直菜单

子菜单是弹出的形式。

  1. <template>                
  2.     <v-menu style="width:240px" :data="verticalMenuData"></v-menu>
  3. </template>
  4. <script>
  5. export default {
  6.     data:()=> ({
  7.         verticalMenuData: [{
  8.             name: '导航一',
  9.             icon: 'mail',
  10.             groups: [{
  11.                 groupName: "分组1",
  12.                 list: [{
  13.                     name: "选项1"
  14.                 },{
  15.                     name: "选项2"
  16.                 }]
  17.             }, {
  18.                 groupName: "分组2",
  19.                 list: [{
  20.                     name: "选项3"
  21.                 },{
  22.                     name: "选项4"
  23.                 }]
  24.             }]
  25.         },{
  26.             name: '导航二',
  27.             icon: 'appstore',
  28.             children: [{
  29.                 name: "选项5"
  30.             },{
  31.                 name: "选项6"
  32.             },{
  33.                 name: "三级导航",
  34.                 children: [{
  35.                     name: "选项7"
  36.                 },{
  37.                     name: "选项8"
  38.                 }]
  39.             }]
  40.         },{
  41.             name: '导航三',
  42.             icon: 'setting',
  43.             children: [{
  44.                 name: "选项9"
  45.             },{
  46.                 name: "选项10"
  47.             },{
  48.                 name: "选项11"
  49.             },{
  50.                 name: "选项12"
  51.             }]
  52.         }]
  53.     })
  54. }
  55. </script>

主题

内建了两套主题 light|dark，默认 light。

  1. <template>
  2.     <v-switch v-model="theme" true-value="dark" false-value="light">
  3.         <span slot="checkedChildren">Dark</span>
  4.         <span slot="unCheckedChildren">Light</span>
  5.     </v-switch>
  6.     <br><br>
  7.     <v-menu style="width:240px" mode="inline" :data="themeMenuData" :theme="theme"></v-menu>
  8. </template>
  9. <script>
  10. export default {
  11.     data:()=> ({
  12.         theme: 'dark',
  13.         themeMenuData: [{
  14.             name: '导航一',
  15.             icon: 'mail',
  16.             groups: [{
  17.                 groupName: "分组1",
  18.                 list: [{
  19.                     name: "选项1"
  20.                 },{
  21.                     name: "选项2"
  22.                 }]
  23.             }, {
  24.                 groupName: "分组2",
  25.                 list: [{
  26.                     name: "选项3"
  27.                 },{
  28.                     name: "选项4"
  29.                 }]
  30.             }]
  31.         },{
  32.             name: '导航二',
  33.             icon: 'appstore',
  34.             children: [{
  35.                 name: "选项5"
  36.             },{
  37.                 name: "选项6"
  38.             },{
  39.                 name: "三级导航",
  40.                 children: [{
  41.                     name: "选项7"
  42.                 },{
  43.                     name: "选项8"
  44.                 }]
  45.             }]
  46.         },{
  47.             name: '导航三',
  48.             icon: 'setting',
  49.             children: [{
  50.                 name: "选项9"
  51.             },{
  52.                 name: "选项10"
  53.             },{
  54.                 name: "选项11"
  55.             },{
  56.                 name: "选项12"
  57.             }]
  58.         }]
  59.     })
  60. }
  61. </script>

切换菜单类型

展示动态切换模式。

  1. <template>
  2.     <v-switch v-model="mode" true-value="vertical" false-value="inline"></v-switch>
  3.     <br><br>
  4.     <v-menu style="width:240px" :mode="mode" :data="modeMenuData"></v-menu>
  5. </template>
  6. <script>
  7. export default {
  8.     data:()=> ({
  9.         mode: 'inline',
  10.         modeMenuData: [{
  11.             name: '导航一',
  12.             icon: 'mail',
  13.             groups: [{
  14.                 groupName: "分组1",
  15.                 list: [{
  16.                     name: "选项1"
  17.                 },{
  18.                     name: "选项2"
  19.                 }]
  20.             }, {
  21.                 groupName: "分组2",
  22.                 list: [{
  23.                     name: "选项3"
  24.                 },{
  25.                     name: "选项4"
  26.                 }]
  27.             }]
  28.         },{
  29.             name: '导航二',
  30.             icon: 'appstore',
  31.             children: [{
  32.                 name: "选项5"
  33.             },{
  34.                 name: "选项6"
  35.             },{
  36.                 name: "三级导航",
  37.                 children: [{
  38.                     name: "选项7"
  39.                 },{
  40.                     name: "选项8"
  41.                 }]
  42.             }]
  43.         },{
  44.             name: '导航三',
  45.             icon: 'setting',
  46.             children: [{
  47.                 name: "选项9"
  48.             },{
  49.                 name: "选项10"
  50.             },{
  51.                 name: "选项11"
  52.             },{
  53.                 name: "选项12"
  54.             }]
  55.         }]
  56.     })
  57. }
  58. </script>

自定义选项

通过scopedSlot自定义选项显示内容

  1. <template>
  2.     <v-menu style="width:240px" :data="customMenuData">
  3.         <template slot-scope="{data}">
  4.             <i v-if="data.icon" :class="'anticon anticon-' + data.icon"></i>
  5.             <router-link :to="data.href" style="display:inline">{{'item-' + data.name}}</router-link>
  6.         </template>
  7.         <template slot-scope="{data}" slot="sub">
  8.             <i v-if="data.icon" :class="'anticon anticon-' + data.icon"></i>
  9.             <span>{{'sub-' + data.name}}</span>
  10.         </template>
  11.         <template slot-scope="{data}" slot="group">
  12.             {{'group-' + data.groupName}}
  13.         </template>
  14.     </v-menu>
  15. </template>
  16. <script>
  17. export default {
  18.     data:()=> ({
  19.         customMenuData: [{
  20.             name: "首页",
  21.             icon: 'home',
  22.             selected: true,
  23.             disabled: true,
  24.             href: '/components/card'
  25.         },{
  26.             name: "安装指南",
  27.             icon: 'mail',
  28.             children: [{
  29.                 href: {
  30.                     name: 'menu',
  31.                     query: {
  32.                         src: 'http://test.api.g7s.chinawayltd.com/iframe.html#apilog/index.html'
  33.                     }
  34.                 },
  35.                 name: "快速上手"
  36.             },{
  37.                 href: "/development",
  38.                 name: "开发指南",
  39.                 disabled: true
  40.             }]
  41.         },{
  42.             name: "基础组件",
  43.             icon: 'folder',
  44.             groups: [{
  45.                 groupName: "Basic",
  46.                 list: [{
  47.                     href: "/components/layout",
  48.                     name: "布局"
  49.                 }]
  50.             },{
  51.                 groupName: "Form",
  52.                 list: [{
  53.                     href: "/components/radio",
  54.                     name: "按钮"
  55.                 }]
  56.             }]
  57.         }]
  58.     })
  59. }
  60. </script>

API

Menu Props

参数说明类型默认值
data可嵌套的节点属性的数组，生成menu的数据Array-
theme主题颜色String: light darklight
expand设为true会展开所有第一级的菜单Booleanfalse
inlineCollapsedinline 时菜单是否收起状态Booleanfalse
default:scopedSlot自定义MenuItem Name的内容，传入的参数:dataSlot Node-
sub:scopedSlot自定义SubMenu Name的内容，传入的参数:dataSlot Node-
group:scopedSlot自定义Group Name的内容，传入的参数:dataSlot Node-

Menu Methods

方法名说明参数返回值
setCheck根据条件对象筛选节点，并设置节点的选中状态conditions: Object,status: Boolean = trueisSuccess: Boolean

Menu Events

事件说明参数
submenu-click点击subMenu title时触发被点击的submenu的数据
submenu-enter鼠标移入subMenu title时触发鼠标移入的submenu的数据
item-click点击Menu Item时触发从根到叶的数组，包含路径上的每个节点的数据

Menu:Data Prop

参数说明类型默认值
name标题String-
disabled是否禁用Booleanfalse
expand是否展开(只有SubMenu上可设置)Booleanfalse
selected选中效果(只有MenuItem上可设置)Booleanfalse
icon图标(只有MenuItem和SubMenu上可以设置)String-
href链接(只有MenuItem上可设置)String-
target打开方式（同，(只有MenuItem上可设置)）String-
children子菜单，同dataObject-
groups分组菜单Object-

Menu:Data:groups Prop

参数说明类型默认值
groupName标题String-
list同dataObject-