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