NavMenu 導航菜單

本文轉載自查看原文 2018-03-14 07:17 9896 Navigation組件

頂欄

適用廣泛的基礎用法。

導航菜單默認為垂直模式，通過mode屬性可以使導航菜單變更為水平模式。另外，在菜單中通過submenu組件可以生成二級菜單。Menu 還提供了background-color、text-color和active-text-color，分別用於設置菜單的背景色、菜單的文字顏色和當前激活菜單的文字顏色。

 1 <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
 2   <el-menu-item index="1">處理中心</el-menu-item>
 3   <el-submenu index="2">
 4     <template slot="title">我的工作台</template>
 5     <el-menu-item index="2-1">選項1</el-menu-item>
 6     <el-menu-item index="2-2">選項2</el-menu-item>
 7     <el-menu-item index="2-3">選項3</el-menu-item>
 8     <el-submenu index="2-4">
 9       <template slot="title">選項4</template>
10       <el-menu-item index="2-4-1">選項1</el-menu-item>
11       <el-menu-item index="2-4-2">選項2</el-menu-item>
12       <el-menu-item index="2-4-3">選項3</el-menu-item>
13     </el-submenu>
14   </el-submenu>
15   <el-menu-item index="3" disabled>消息中心</el-menu-item>
16   <el-menu-item index="4"><a href="https://www.ele.me" target="_blank">訂單管理</a></el-menu-item>
17 </el-menu>
18 <div class="line"></div>
19 <el-menu
20   :default-active="activeIndex2"
21   class="el-menu-demo"
22   mode="horizontal"
23   @select="handleSelect"
24   background-color="#545c64"
25   text-color="#fff"
26   active-text-color="#ffd04b">
27   <el-menu-item index="1">處理中心</el-menu-item>
28   <el-submenu index="2">
29     <template slot="title">我的工作台</template>
30     <el-menu-item index="2-1">選項1</el-menu-item>
31     <el-menu-item index="2-2">選項2</el-menu-item>
32     <el-menu-item index="2-3">選項3</el-menu-item>
33     <el-submenu index="2-4">
34       <template slot="title">選項4</template>
35       <el-menu-item index="2-4-1">選項1</el-menu-item>
36       <el-menu-item index="2-4-2">選項2</el-menu-item>
37       <el-menu-item index="2-4-3">選項3</el-menu-item>
38     </el-submenu>
39   </el-submenu>
40   <el-menu-item index="3" disabled>消息中心</el-menu-item>
41   <el-menu-item index="4"><a href="https://www.ele.me" target="_blank">訂單管理</a></el-menu-item>
42 </el-menu>
43 
44 <script>
45   export default {
46     data() {
47       return {
48         activeIndex: '1',
49         activeIndex2: '1'
50       };
51     },
52     methods: {
53       handleSelect(key, keyPath) {
54         console.log(key, keyPath);
55       }
56     }
57   }
58 </script>

View Code

側欄

垂直菜單，可內嵌子菜單。

通過el-menu-item-group組件可以實現菜單進行分組，分組名可以通過title屬性直接設定，也可以通過具名 slot 來設定。

 1 <el-row class="tac">
 2   <el-col :span="12">
 3     <h5>默認顏色</h5>
 4     <el-menu
 5       default-active="2"
 6       class="el-menu-vertical-demo"
 7       @open="handleOpen"
 8       @close="handleClose">
 9       <el-submenu index="1">
10         <template slot="title">
11           <i class="el-icon-location"></i>
12           <span>導航一</span>
13         </template>
14         <el-menu-item-group>
15           <template slot="title">分組一</template>
16           <el-menu-item index="1-1">選項1</el-menu-item>
17           <el-menu-item index="1-2">選項2</el-menu-item>
18         </el-menu-item-group>
19         <el-menu-item-group title="分組2">
20           <el-menu-item index="1-3">選項3</el-menu-item>
21         </el-menu-item-group>
22         <el-submenu index="1-4">
23           <template slot="title">選項4</template>
24           <el-menu-item index="1-4-1">選項1</el-menu-item>
25         </el-submenu>
26       </el-submenu>
27       <el-menu-item index="2">
28         <i class="el-icon-menu"></i>
29         <span slot="title">導航二</span>
30       </el-menu-item>
31       <el-menu-item index="3" disabled>
32         <i class="el-icon-document"></i>
33         <span slot="title">導航三</span>
34       </el-menu-item>
35       <el-menu-item index="4">
36         <i class="el-icon-setting"></i>
37         <span slot="title">導航四</span>
38       </el-menu-item>
39     </el-menu>
40   </el-col>
41   <el-col :span="12">
42     <h5>自定義顏色</h5>
43     <el-menu
44       default-active="2"
45       class="el-menu-vertical-demo"
46       @open="handleOpen"
47       @close="handleClose"
48       background-color="#545c64"
49       text-color="#fff"
50       active-text-color="#ffd04b">
51       <el-submenu index="1">
52         <template slot="title">
53           <i class="el-icon-location"></i>
54           <span>導航一</span>
55         </template>
56         <el-menu-item-group>
57           <template slot="title">分組一</template>
58           <el-menu-item index="1-1">選項1</el-menu-item>
59           <el-menu-item index="1-2">選項2</el-menu-item>
60         </el-menu-item-group>
61         <el-menu-item-group title="分組2">
62           <el-menu-item index="1-3">選項3</el-menu-item>
63         </el-menu-item-group>
64         <el-submenu index="1-4">
65           <template slot="title">選項4</template>
66           <el-menu-item index="1-4-1">選項1</el-menu-item>
67         </el-submenu>
68       </el-submenu>
69       <el-menu-item index="2">
70         <i class="el-icon-menu"></i>
71         <span slot="title">導航二</span>
72       </el-menu-item>
73       <el-menu-item index="3" disabled>
74         <i class="el-icon-document"></i>
75         <span slot="title">導航三</span>
76       </el-menu-item>
77       <el-menu-item index="4">
78         <i class="el-icon-setting"></i>
79         <span slot="title">導航四</span>
80       </el-menu-item>
81     </el-menu>
82   </el-col>
83 </el-row>
84 
85 <script>
86   export default {
87     methods: {
88       handleOpen(key, keyPath) {
89         console.log(key, keyPath);
90       },
91       handleClose(key, keyPath) {
92         console.log(key, keyPath);
93       }
94     }
95   }
96 </script>

View Code

折疊

 1 <el-radio-group v-model="isCollapse" style="margin-bottom: 20px;">
 2   <el-radio-button :label="false">展開</el-radio-button>
 3   <el-radio-button :label="true">收起</el-radio-button>
 4 </el-radio-group>
 5 <el-menu default-active="1-4-1" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" :collapse="isCollapse">
 6   <el-submenu index="1">
 7     <template slot="title">
 8       <i class="el-icon-location"></i>
 9       <span slot="title">導航一</span>
10     </template>
11     <el-menu-item-group>
12       <span slot="title">分組一</span>
13       <el-menu-item index="1-1">選項1</el-menu-item>
14       <el-menu-item index="1-2">選項2</el-menu-item>
15     </el-menu-item-group>
16     <el-menu-item-group title="分組2">
17       <el-menu-item index="1-3">選項3</el-menu-item>
18     </el-menu-item-group>
19     <el-submenu index="1-4">
20       <span slot="title">選項4</span>
21       <el-menu-item index="1-4-1">選項1</el-menu-item>
22     </el-submenu>
23   </el-submenu>
24   <el-menu-item index="2">
25     <i class="el-icon-menu"></i>
26     <span slot="title">導航二</span>
27   </el-menu-item>
28   <el-menu-item index="3" disabled>
29     <i class="el-icon-document"></i>
30     <span slot="title">導航三</span>
31   </el-menu-item>
32   <el-menu-item index="4">
33     <i class="el-icon-setting"></i>
34     <span slot="title">導航四</span>
35   </el-menu-item>
36 </el-menu>
37 
38 <style>
39   .el-menu-vertical-demo:not(.el-menu--collapse) {
40     width: 200px;
41     min-height: 400px;
42   }
43 </style>
44 
45 <script>
46   export default {
47     data() {
48       return {
49         isCollapse: true
50       };
51     },
52     methods: {
53       handleOpen(key, keyPath) {
54         console.log(key, keyPath);
55       },
56       handleClose(key, keyPath) {
57         console.log(key, keyPath);
58       }
59     }
60   }
61 </script>

View Code

參數	說明	類型	可選值	默認值
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

事件名稱	說明	參數
open	展開指定的 sub-menu	index: 需要打開的 sub-menu 的 index
close	收起指定的 sub-menu	index: 需要收起的 sub-menu 的 index

事件名稱	說明	回調參數
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

參數	說明	類型	可選值	默認值
index	唯一標志	string	—	—
popper-class	彈出菜單的自定義類名	string	—	—
show-timeout	展開 sub-menu 的延時	number	—	300
hide-timeout	收起 sub-menu 的延時	number	—	300
disabled	是否禁用	boolean	—	false

參數	說明	類型	可選值	默認值
index	唯一標志	string	—	—
route	Vue Router 路徑對象	Object	—	—
disabled	是否禁用	boolean	—	false

參數	說明	類型	可選值	默認值
title	分組標題	string	—	—

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 Element NavMenu動態生成導航菜單修改element的NavMenu 導航菜單組件樣式 NavMenu 導航菜單"中的參數unique-opened設置無效? element NavMenu側欄導航菜單（可折疊） vue-router + ElementUI實現NavMenu 導航菜單選中狀態的切換 [vue ]滾動視圖解決ElementUI NavMenu 導航菜單過長顯示的問題【應用】如何使用 element-ui 之 NavMenu 導航菜單中的 router 屬性（在激活導航時以 path 進行路由跳轉） element-ui 框架中使用 NavMenu 導航菜單組件時，點擊一個子菜單會出現多個子菜單同時展開或折疊？導航菜單導航菜單特效-動態加載導航菜單

NavMenu 導航菜單

頂欄

側欄

折疊

Menu Attribute

Menu Methods

Menu Events

SubMenu Attribute

Menu-Item Attribute

Menu-Group Attribute

免責聲明！