免費(fèi)AI編程助手
ElementPlus NavMenu 導(dǎo)航菜單
2021-09-26 17:04 更新
NavMenu 導(dǎo)航菜單
為網(wǎng)站提供導(dǎo)航功能的菜單。
頂欄
適用廣泛的基礎(chǔ)用法。
導(dǎo)航菜單默認(rèn)為垂直模式，通過mode屬性可以使導(dǎo)航菜單變更為水平模式。另外，在菜單中通過sub-menu組件可以生成二級(jí)菜單。Menu 還提供了background-color、text-color和active-text-color，分別用于設(shè)置菜單的背景色、菜單的文字顏色和當(dāng)前激活菜單的文字顏色。
<template>
<el-menu
:default-active="activeIndex"
class="el-menu-demo"
mode="horizontal"
@select="handleSelect"
>
<el-menu-item index="1">處理中心</el-menu-item>
<el-sub-menu index="2">
<template #title>我的工作臺(tái)</template>
<el-menu-item index="2-1">選項(xiàng)1</el-menu-item>
<el-menu-item index="2-2">選項(xiàng)2</el-menu-item>
<el-menu-item index="2-3">選項(xiàng)3</el-menu-item>
<el-sub-menu index="2-4">
<template #title>選項(xiàng)4</template>
<el-menu-item index="2-4-1">選項(xiàng)1</el-menu-item>
<el-menu-item index="2-4-2">選項(xiàng)2</el-menu-item>
<el-menu-item index="2-4-3">選項(xiàng)3</el-menu-item>
</el-sub-menu>
</el-sub-menu>
<el-menu-item index="3" disabled>消息中心</el-menu-item>
<el-menu-item index="4">訂單管理</el-menu-item>
</el-menu>
<div class="line"></div>
<el-menu
:default-active="activeIndex2"
class="el-menu-demo"
mode="horizontal"
@select="handleSelect"
background-color="#545c64"
text-color="#fff"
active-text-color="#ffd04b"
>
<el-menu-item index="1">處理中心</el-menu-item>
<el-sub-menu index="2">
<template #title>我的工作臺(tái)</template>
<el-menu-item index="2-1">選項(xiàng)1</el-menu-item>
<el-menu-item index="2-2">選項(xiàng)2</el-menu-item>
<el-menu-item index="2-3">選項(xiàng)3</el-menu-item>
<el-sub-menu index="2-4">
<template #title>選項(xiàng)4</template>
<el-menu-item index="2-4-1">選項(xiàng)1</el-menu-item>
<el-menu-item index="2-4-2">選項(xiàng)2</el-menu-item>
<el-menu-item index="2-4-3">選項(xiàng)3</el-menu-item>
</el-sub-menu>
</el-sub-menu>
<el-menu-item index="3" disabled>消息中心</el-menu-item>
<el-menu-item index="4">訂單管理</el-menu-item>
</el-menu>
</template>
<script>
export default {
data() {
return {
activeIndex: '1',
activeIndex2: '1',
}
},
methods: {
handleSelect(key, keyPath) {
console.log(key, keyPath)
},
},
}
</script>
側(cè)欄
垂直菜單，可內(nèi)嵌子菜單。
通過el-menu-item-group組件可以實(shí)現(xiàn)菜單進(jìn)行分組，分組名可以通過title屬性直接設(shè)定，也可以通過具名 slot 來(lái)設(shè)定。
<template>
<el-row class="tac">
<el-col :span="12">
<h5>默認(rèn)顏色</h5>
<el-menu
default-active="2"
class="el-menu-vertical-demo"
@open="handleOpen"
@close="handleClose"
>
<el-sub-menu index="1">
<template #title>
<i class="el-icon-location"></i>
<span>導(dǎo)航一</span>
</template>
<el-menu-item-group>
<template #title>分組一</template>
<el-menu-item index="1-1">選項(xiàng)1</el-menu-item>
<el-menu-item index="1-2">選項(xiàng)2</el-menu-item>
</el-menu-item-group>
<el-menu-item-group title="分組2">
<el-menu-item index="1-3">選項(xiàng)3</el-menu-item>
</el-menu-item-group>
<el-sub-menu index="1-4">
<template #title>選項(xiàng)4</template>
<el-menu-item index="1-4-1">選項(xiàng)1</el-menu-item>
</el-sub-menu>
</el-sub-menu>
<el-menu-item index="2">
<i class="el-icon-menu"></i>
<template #title>導(dǎo)航二</template>
</el-menu-item>
<el-menu-item index="3" disabled>
<i class="el-icon-document"></i>
<template #title>導(dǎo)航三</template>
</el-menu-item>
<el-menu-item index="4">
<i class="el-icon-setting"></i>
<template #title>導(dǎo)航四</template>
</el-menu-item>
</el-menu>
</el-col>
<el-col :span="12">
<h5>自定義顏色</h5>
<el-menu
:uniqueOpened="true"
default-active="2"
class="el-menu-vertical-demo"
@open="handleOpen"
@close="handleClose"
background-color="#545c64"
text-color="#fff"
active-text-color="#ffd04b"
>
<el-sub-menu index="1">
<template #title>
<i class="el-icon-location"></i>
<span>導(dǎo)航一</span>
</template>
<el-menu-item-group>
<template #title>分組一</template>
<el-menu-item index="1-1">選項(xiàng)1</el-menu-item>
<el-menu-item index="1-2">選項(xiàng)2</el-menu-item>
</el-menu-item-group>
<el-menu-item-group title="分組2">
<el-menu-item index="1-3">選項(xiàng)3</el-menu-item>
</el-menu-item-group>
<el-sub-menu index="1-4">
<template #title>選項(xiàng)4</template>
<el-menu-item index="1-4-1">選項(xiàng)1</el-menu-item>
</el-sub-menu>
</el-sub-menu>
<el-menu-item index="2">
<i class="el-icon-menu"></i>
<template #title>導(dǎo)航二</template>
</el-menu-item>
<el-menu-item index="3" disabled>
<i class="el-icon-document"></i>
<template #title>導(dǎo)航三</template>
</el-menu-item>
<el-menu-item index="4">
<i class="el-icon-setting"></i>
<template #title>導(dǎo)航四</template>
</el-menu-item>
<el-sub-menu index="5">
<template #title>
<i class="el-icon-location"></i>
<span>導(dǎo)航一</span>
</template>
<el-menu-item-group>
<template #title>分組一</template>
<el-menu-item index="5-1">選項(xiàng)1</el-menu-item>
<el-menu-item index="5-2">選項(xiàng)2</el-menu-item>
</el-menu-item-group>
<el-menu-item-group title="分組2">
<el-menu-item index="5-3">選項(xiàng)3</el-menu-item>
</el-menu-item-group>
</el-sub-menu>
</el-menu>
</el-col>
</el-row>
</template>
<script>
export default {
methods: {
handleOpen(key, keyPath) {
console.log(key, keyPath)
},
handleClose(key, keyPath) {
console.log(key, keyPath)
},
},
}
</script>
折疊
<template>
<el-radio-group v-model="isCollapse" style="margin-bottom: 20px;">
<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-sub-menu index="1">
<template #title>
<i class="el-icon-location"></i>
<span>導(dǎo)航一</span>
</template>
<el-menu-item-group>
<template #title>分組一</template>
<el-menu-item index="1-1">選項(xiàng)1</el-menu-item>
<el-menu-item index="1-2">選項(xiàng)2</el-menu-item>
</el-menu-item-group>
<el-menu-item-group title="分組2">
<el-menu-item index="1-3">選項(xiàng)3</el-menu-item>
</el-menu-item-group>
<el-sub-menu index="1-4">
<template #title>選項(xiàng)4</template>
<el-menu-item index="1-4-1">選項(xiàng)1</el-menu-item>
</el-sub-menu>
</el-sub-menu>
<el-menu-item index="2">
<i class="el-icon-menu"></i>
<template #title>導(dǎo)航二</template>
</el-menu-item>
<el-menu-item index="3" disabled>
<i class="el-icon-document"></i>
<template #title>導(dǎo)航三</template>
</el-menu-item>
<el-menu-item index="4">
<i class="el-icon-setting"></i>
<template #title>導(dǎo)航四</template>
</el-menu-item>
</el-menu>
</template>
<script>
export default {
data() {
return {
isCollapse: true,
}
},
methods: {
handleOpen(key, keyPath) {
console.log(key, keyPath)
},
handleClose(key, keyPath) {
console.log(key, keyPath)
},
},
}
</script>
<style>
.el-menu-vertical-demo:not(.el-menu--collapse) {
width: 200px;
min-height: 400px;
}
</style>Menu Attribute
| 參數(shù) | 說(shuō)明 | 類型 | 可選值 | 默認(rèn)值 |
|---|---|---|---|---|
| mode | 模式 | string | horizontal / vertical | vertical |
| collapse | 是否水平折疊收起菜單（僅在 mode 為 vertical 時(shí)可用） | boolean | — | false |
| background-color | 菜單的背景色（僅支持 hex 格式） | string | — | #ffffff |
| text-color | 菜單的文字顏色（僅支持 hex 格式） | string | — | #303133 |
| active-text-color | 當(dāng)前激活菜單的文字顏色（僅支持 hex 格式） | string | — | #409EFF |
| default-active | 當(dāng)前激活菜單的 index | string | — | — |
| default-openeds | 當(dāng)前打開的 sub-menu 的 index 的數(shù)組 | Array | — | — |
| unique-opened | 是否只保持一個(gè)子菜單的展開 | boolean | — | false |
| menu-trigger | 子菜單打開的觸發(fā)方式(只在 mode 為 horizontal 時(shí)有效) | string | hover / click | hover |
| router | 是否使用 vue-router 的模式，啟用該模式會(huì)在激活導(dǎo)航時(shí)以 index 作為 path 進(jìn)行路由跳轉(zhuǎn) | boolean | — | false |
| collapse-transition | 是否開啟折疊動(dòng)畫 | boolean | — | true |
Menu Methods
| 方法名稱 | 說(shuō)明 | 參數(shù) |
|---|---|---|
| open | 展開指定的 sub-menu | index: 需要打開的 sub-menu 的 index |
| close | 收起指定的 sub-menu | index: 需要收起的 sub-menu 的 index |
Menu Events
| 事件名稱 | 說(shuō)明 | 回調(diào)參數(shù) |
|---|---|---|
| select | 菜單激活回調(diào) | index: 選中菜單項(xiàng)的 index, indexPath: 選中菜單項(xiàng)的 index path, item: 選中菜單項(xiàng), routeResult: vue-router 的返回值（如果 router 為 true） |
| open | sub-menu 展開的回調(diào) | index: 打開的 sub-menu 的 index, indexPath: 打開的 sub-menu 的 index path |
| close | sub-menu 收起的回調(diào) | index: 收起的 sub-menu 的 index, indexPath: 收起的 sub-menu 的 index path |
SubMenu Attribute
| 參數(shù) | 說(shuō)明 | 類型 | 可選值 | 默認(rèn)值 |
|---|---|---|---|---|
| index | 唯一標(biāo)志 | string/null | — | null |
| popper-class | 彈出菜單的自定義類名 | string | — | — |
| show-timeout | 展開 sub-menu 的延時(shí) | number | — | 300 |
| hide-timeout | 收起 sub-menu 的延時(shí) | number | — | 300 |
| disabled | 是否禁用 | boolean | — | false |
| popper-append-to-body | 是否將彈出菜單插入至 body 元素。在菜單的定位出現(xiàn)問題時(shí)，可嘗試修改該屬性 | boolean | — | 一級(jí)子菜單：true / 非一級(jí)子菜單：false |
Menu-Item Attribute
| 參數(shù) | 說(shuō)明 | 類型 | 可選值 | 默認(rèn)值 |
|---|---|---|---|---|
| index | 唯一標(biāo)志 | string | — | — |
| route | Vue Router 路徑對(duì)象 | Object | — | — |
| disabled | 是否禁用 | boolean | — | false |
Menu-Group Attribute
| 參數(shù) | 說(shuō)明 | 類型 | 可選值 | 默認(rèn)值 |
|---|---|---|---|---|
| title | 分組標(biāo)題 | string | — | — |
以上內(nèi)容是否對(duì)您有幫助：
更多建議：