Menu 菜单

引入组件

<template>
  <div>
    <m-menu>
      <m-menu-item name="menu-level-1-1">菜单一</m-menu-item>
      <m-sub-menu name="menu-level-1-2">
        <template v-slot:title>
          菜单二
        </template>
        <m-menu-item name="menu-level-2-1">二级菜单</m-menu-item>
        <m-menu-item name="menu-level-2-2">二级菜单</m-menu-item>
        <m-menu-item name="menu-level-2-3">二级菜单</m-menu-item>
      </m-sub-menu>
      <m-menu-item name="menu-level-1-3" :disabled="true">菜单三</m-menu-item>
      <m-sub-menu name="menu-level-1-4">
        <template v-slot:title>
          菜单四
        </template>
        <m-menu-item name="menu-level-2-4">二级菜单</m-menu-item>
        <m-menu-item name="menu-level-2-5">二级菜单</m-menu-item>
        <m-sub-menu name="menu-level-2-6">
          <template v-slot:title>
            二级菜单
          </template>
          <m-menu-item name="menu-level-3-1">三级菜单</m-menu-item>
          <m-menu-item name="menu-level-3-2">三级菜单</m-menu-item>
        </m-sub-menu>
      </m-sub-menu>
    </m-menu>
  </div>
</template>

<script>
  import { MMenu, MMenuItem, MSubMenu } from "@csr/m_ui";
  export default {
    components: {
      MMenu,
      MMenuItem,
      MSubMenu
    }
  }
</script>

基础用法

菜单一 二级菜单 二级菜单 二级菜单 菜单三 二级菜单 二级菜单 三级菜单 三级菜单
代码
<m-menu>
  <m-menu-item name="menu-level-1-1">菜单一</m-menu-item>
  <m-sub-menu name="menu-level-1-2">
    <template v-slot:title>
      菜单二
    </template>
    <m-menu-item name="menu-level-2-1">二级菜单</m-menu-item>
    <m-menu-item name="menu-level-2-2">二级菜单</m-menu-item>
    <m-menu-item name="menu-level-2-3">二级菜单</m-menu-item>
  </m-sub-menu>
  <m-menu-item name="menu-level-1-3" :disabled="true">菜单三</m-menu-item>
  <m-sub-menu name="menu-level-1-4">
    <template v-slot:title>
      菜单四
    </template>
    <m-menu-item name="menu-level-2-4">二级菜单</m-menu-item>
    <m-menu-item name="menu-level-2-5">二级菜单</m-menu-item>
    <m-sub-menu name="menu-level-2-6">
      <template v-slot:title>
        二级菜单
      </template>
      <m-menu-item name="menu-level-3-1">三级菜单</m-menu-item>
      <m-menu-item name="menu-level-3-2">三级菜单</m-menu-item>
    </m-sub-menu>
  </m-sub-menu>
</m-menu>

点击方式展开下级菜单

菜单一 二级菜单 二级菜单 二级菜单 菜单三 二级菜单 二级菜单 三级菜单 三级菜单
代码
<m-menu sub-menu-trigger="click">
  <m-menu-item name="menu-level-1-1">菜单一</m-menu-item>
  <m-sub-menu name="menu-level-1-2">
    <template v-slot:title>
      菜单二
    </template>
    <m-menu-item name="menu-level-2-1">二级菜单</m-menu-item>
    <m-menu-item name="menu-level-2-2">二级菜单</m-menu-item>
    <m-menu-item name="menu-level-2-3">二级菜单</m-menu-item>
  </m-sub-menu>
  <m-menu-item name="menu-level-1-3" :disabled="true">菜单三</m-menu-item>
  <m-sub-menu name="menu-level-1-4">
    <template v-slot:title>
      菜单四
    </template>
    <m-menu-item name="menu-level-2-4">二级菜单</m-menu-item>
    <m-menu-item name="menu-level-2-5">二级菜单</m-menu-item>
    <m-sub-menu name="menu-level-2-6">
      <template v-slot:title>
        二级菜单
      </template>
      <m-menu-item name="menu-level-3-1">三级菜单</m-menu-item>
      <m-menu-item name="menu-level-3-2">三级菜单</m-menu-item>
    </m-sub-menu>
  </m-sub-menu>
</m-menu>

纵向菜单

菜单一 二级菜单 二级菜单 二级菜单 菜单三 二级菜单 二级菜单 三级菜单 三级菜单
代码
<m-menu :vertical="true">
  <m-menu-item name="menu-level-1-1">菜单一</m-menu-item>
  <m-sub-menu name="menu-level-1-2">
    <template v-slot:title>
      菜单二
    </template>
    <m-menu-item name="menu-level-2-1">二级菜单</m-menu-item>
    <m-menu-item name="menu-level-2-2">二级菜单</m-menu-item>
    <m-menu-item name="menu-level-2-3">二级菜单</m-menu-item>
  </m-sub-menu>
  <m-menu-item name="menu-level-1-3" :disabled="true">菜单三</m-menu-item>
  <m-sub-menu name="menu-level-1-4">
    <template v-slot:title>
      菜单四
    </template>
    <m-menu-item name="menu-level-2-4">二级菜单</m-menu-item>
    <m-menu-item name="menu-level-2-5">二级菜单</m-menu-item>
    <m-sub-menu name="menu-level-2-6">
      <template v-slot:title>
        二级菜单
      </template>
      <m-menu-item name="menu-level-3-1">三级菜单</m-menu-item>
      <m-menu-item name="menu-level-3-2">三级菜单</m-menu-item>
    </m-sub-menu>
  </m-sub-menu>
</m-menu>

手风琴模式

菜单一 二级菜单 二级菜单 二级菜单 菜单三 二级菜单 二级菜单 三级菜单 三级菜单 三级菜单 三级菜单
代码
<m-menu :vertical="true" :accordion="true">
  <m-menu-item name="menu-level-1-1">菜单一</m-menu-item>
  <m-sub-menu name="menu-level-1-2">
    <template v-slot:title>
      菜单二
    </template>
    <m-menu-item name="menu-level-2-1">二级菜单</m-menu-item>
    <m-menu-item name="menu-level-2-2">二级菜单</m-menu-item>
    <m-menu-item name="menu-level-2-3">二级菜单</m-menu-item>
  </m-sub-menu>
  <m-menu-item name="menu-level-1-3" :disabled="true">菜单三</m-menu-item>
  <m-sub-menu name="menu-level-1-4">
    <template v-slot:title>
      菜单四
    </template>
    <m-menu-item name="menu-level-2-4">二级菜单</m-menu-item>
    <m-menu-item name="menu-level-2-5">二级菜单</m-menu-item>
    <m-sub-menu name="menu-level-2-6">
      <template v-slot:title>
        二级菜单
      </template>
      <m-menu-item name="menu-level-3-1">三级菜单</m-menu-item>
      <m-menu-item name="menu-level-3-2">三级菜单</m-menu-item>
    </m-sub-menu>
  </m-sub-menu>
</m-menu>

默认选中

菜单一 二级菜单 二级菜单 二级菜单 菜单三 二级菜单 二级菜单 三级菜单 三级菜单 三级菜单 三级菜单
代码
<m-menu :vertical="true" default-active="menu-level-3-1">
  <m-menu-item name="menu-level-1-1">菜单一</m-menu-item>
  <m-sub-menu name="menu-level-1-2">
    <template v-slot:title>
      菜单二
    </template>
    <m-menu-item name="menu-level-2-1">二级菜单</m-menu-item>
    <m-menu-item name="menu-level-2-2">二级菜单</m-menu-item>
    <m-menu-item name="menu-level-2-3">二级菜单</m-menu-item>
  </m-sub-menu>
  <m-menu-item name="menu-level-1-3" :disabled="true">菜单三</m-menu-item>
  <m-sub-menu name="menu-level-1-4">
    <template v-slot:title>
      菜单四
    </template>
    <m-menu-item name="menu-level-2-4">二级菜单</m-menu-item>
    <m-menu-item name="menu-level-2-5">二级菜单</m-menu-item>
    <m-sub-menu name="menu-level-2-6">
      <template v-slot:title>
        二级菜单
      </template>
      <m-menu-item name="menu-level-3-1">三级菜单</m-menu-item>
      <m-menu-item name="menu-level-3-2">三级菜单</m-menu-item>
    </m-sub-menu>
    <m-sub-menu name="menu-level-2-7">
      <template v-slot:title>
        二级菜单
      </template>
      <m-menu-item name="menu-level-3-3">三级菜单</m-menu-item>
      <m-menu-item name="menu-level-3-4">三级菜单</m-menu-item>
    </m-sub-menu>
  </m-sub-menu>
</m-menu>

API

MMenu

属性说明类型默认值
default-active 默认选中的菜单的name string
vertical 是否为纵向模式 boolean false
accordion 是否开启手风琴模式,只在vertical为true的时候生效 boolean false
sub-menu-trigger 子菜单打开的触发方式,可选值:click,hover。hover只在vertical为false的时候生效 string hover

MMenuItem

属性说明类型默认值
name 菜单的标识,必传,该属性的值唯一。 string
disabled 是否禁用 boolean false
to 点击菜单跳转链接 string

MSubMenu

属性说明类型默认值
name 菜单的标识,必传,该属性的值唯一。 string
disabled 是否禁用 boolean false

事件

事件名 说明 回调参数
on-select 菜单选中时触发 (namePath: array) 选中菜单项的name值组成的数组
toggle-sub-menu 可展开菜单选中时触发 (name: string, isOpen: boolean)