溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本文來源于Element官方文檔：
http://element-cn.eleme.io/#/zh-CN/component/menu
基礎用法
普通導航菜單
<el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
<el-menu-item index="1">處理中心</el-menu-item>
<el-submenu index="2">
<template slot="title">我的工作臺</template>
<el-menu-item index="2-1">選項1</el-menu-item>
<el-menu-item index="2-2">選項2</el-menu-item>
<el-menu-item index="2-3">選項3</el-menu-item>
<el-submenu index="2-4">
<template slot="title">選項4</template>
<el-menu-item index="2-4-1">選項1</el-menu-item>
<el-menu-item index="2-4-2">選項2</el-menu-item>
<el-menu-item index="2-4-3">選項3</el-menu-item>
</el-submenu>
</el-submenu>
<el-menu-item index="3" disabled>消息中心</el-menu-item>
<el-menu-item index="4"><a rel="external nofollow" target="_blank">訂單管理</a></el-menu-item>
</el-menu>
垂直導航條
<el-menu default-active="2" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose">
<el-submenu index="1">
<template slot="title">
<i class="el-icon-location"></i>
<span>導航一</span>
</template>
<el-menu-item-group>
<template slot="title">分組一</template>
<el-menu-item index="1-1">選項1</el-menu-item>
<el-menu-item index="1-2">選項2</el-menu-item>
</el-menu-item-group>
<el-menu-item-group title="分組2">
<el-menu-item index="1-3">選項3</el-menu-item>
</el-menu-item-group>
<el-submenu index="1-4">
<template slot="title">選項4</template>
<el-menu-item index="1-4-1">選項1</el-menu-item>
</el-submenu>
</el-submenu>
<el-menu-item index="2">
<i class="el-icon-menu"></i>
<span slot="title">導航二</span>
</el-menu-item>
<el-menu-item index="3" disabled>
<i class="el-icon-document"></i>
<span slot="title">導航三</span>
</el-menu-item>
<el-menu-item index="4">
<i class="el-icon-setting"></i>
<span slot="title">導航四</span>
</el-menu-item>
</el-menu>
折疊導航條
<el-radio-group v-model="isCollapse" >
<el-radio-button :label="false">展開</el-radio-button>
<el-radio-button :label="true">收起</el-radio-button>
</el-radio-group>
<el-menu default-active="1-4-1" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" :collapse="isCollapse">
<el-submenu index="1">
<template slot="title">
<i class="el-icon-location"></i>
<span slot="title">導航一</span>
</template>
<el-menu-item-group>
<span slot="title">分組一</span>
<el-menu-item index="1-1">選項1</el-menu-item>
<el-menu-item index="1-2">選項2</el-menu-item>
</el-menu-item-group>
<el-menu-item-group title="分組2">
<el-menu-item index="1-3">選項3</el-menu-item>
</el-menu-item-group>
<el-submenu index="1-4">
<span slot="title">選項4</span>
<el-menu-item index="1-4-1">選項1</el-menu-item>
</el-submenu>
</el-submenu>
<el-menu-item index="2">
<i class="el-icon-menu"></i>
<span slot="title">導航二</span>
</el-menu-item>
<el-menu-item index="3" disabled>
<i class="el-icon-document"></i>
<span slot="title">導航三</span>
</el-menu-item>
<el-menu-item index="4">
<i class="el-icon-setting"></i>
<span slot="title">導航四</span>
</el-menu-item>
</el-menu>
Menu Attribute：
| 參數 | 類型 | 說明 | 可選值 | 默認值 |
|---|---|---|---|---|
| mode | 模式 | string | horizontal / vertical | vertical |
| collapse | 是否水平折疊收起菜單（僅在 mode 為 vertical 時可用） | boolean | — | false |
| background-color | 菜單的背景色（僅支持 hex 格式） | string | — | ffffff |
| text-color | 菜單的文字顏色（僅支持 hex 格式） | string | — | 303133 |
| active-text-color | 當前激活菜單的文字顏色（僅支持 hex 格式） | string | — | 409EFF |
| default-active | 當前激活菜單的 index | string | — | — |
| default-openeds | 當前打開的sub-menu的 key 數組 | Array | — | — |
| unique-opened | 是否只保持一個子菜單的展開 | boolean | — | false |
| menu-trigger | 子菜單打開的觸發方式(只在 mode 為 horizontal 時有效) | string | — | hover |
| router | 是否使用 vue-router 的模式，啟用該模式會在激活導航時以 index 作為 path 進行路由跳轉 | boolean | — | false |
Menu Methods:
| 事件名稱 | 說明 | 參數 |
|---|---|---|
| open | 展開指定的 sub-menu index: | 需要打開的 sub-menu 的 index |
| close | 收起指定的 sub-menu index: | 需要收起的 sub-menu 的 index |
Menu Events:
| 事件名稱 | 說明 | 回調參數 |
|---|---|---|
| select | 菜單激活回調 | index: 選中菜單項的 index, indexPath: 選中菜單項的 index path |
| open | sub-menu 展開的回調 | index: 打開的 sub-menu 的 index， indexPath: 打開的 sub-menu 的 index path |
| close | sub-menu 收起的回調 | index: 收起的 sub-menu 的 index， indexPath: 收起的 sub-menu 的 index path |
SubMenu Attribute:
| 參數 | 說明 | 類型 | 可選值 | 默認值 |
|---|---|---|---|---|
| mode | 唯一標志 | string | — | — |
| mode | 彈出菜單的自定義類名 | string | — | — |
| mode | 展開 sub-menu 的延時 | number | — | 300 |
| mode | 收起 sub-menu 的延時 | number | — | 300 |
| mode | 是否禁用 | boolean | — | false |
Menu-Item Attribute:
| 參數 | 說明 | 類型 | 可選值 | 默認值 |
|---|---|---|---|---|
| index | 唯一標志 | string | — | — |
| route | Vue Router 路徑對象 | Object | — | — |
| disabled | 是否禁用 | boolean | — | false |
Menu-Group Attribute:
| 參數 | 說明 | 類型 | 可選值 | 默認值 |
|---|---|---|---|---|
| title | 分組標題 | string | — | — |
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
