想用iview作一個能夠伸縮的側邊菜單欄，效果以下：javascript
1.側邊欄收縮前：能夠經過點擊菜單分類展開子菜單項；html
2.可讓用戶點擊圖標動態收縮菜單欄；前端
3.側邊欄收縮後：只顯示菜單分類的圖標，鼠標放置在菜單分類上後右側展現子菜單項目。java
1、初探ios
仔細看了iview的菜單組件，菜單組件自己不支持伸縮（element UI、antd是有現成組件的）,看了一下layout組件(https://www.iviewui.com/components/layout)能夠實現動態收縮側邊欄（側邊欄伸縮同時隱藏菜單項的文字實現菜單收縮）。但這種方法只是單純的將一級分類菜單隱藏了，示例中是隻有一級菜單，本身套入二級菜單後慘不忍睹。數組
2、研究思考antd
百度了一堆iview伸縮菜單的實現方式，發現有的人在側邊欄收縮後二級菜單能正常顯示，內心就想莫非這些人是用是收費的UI Pro，因而就打開了UI Pro的網址(https://pro.iviewui.com/pro/introduce)。你猜怎麼着！Pro的網站側邊欄就是咱們想要的效果，翻了一下Pro的組件也沒有可伸縮的菜單組件啊~ 看來只能本身實現了，不過好在能夠拿Pro的的作參考研究。app
觀察發現側邊欄收起來後：1)當菜單分類下沒有子菜單時，右邊彈出的是一個tooltip組件 2）當菜單分類下有子菜單時，右邊彈出的是dropdown組件。iview
3、實現優化
將菜單放到menu數組中，經過children屬性設置菜單分類的子菜單，template部分對menu進行遍歷，經過判斷當前條件(側邊欄是否收縮、當前分類是否有子菜單)放置不一樣的組件，實現側邊菜單的動態伸縮展現。存在以下4種狀況：
1.菜單展開時，當前菜單分類沒有子菜單，使用MenuItem組件。
2.菜單展開時，當前菜單分類有子菜單，使用Submenu組件。
3.菜單收縮時，當前菜單沒有子菜單，使用Tooltip組件。
4.菜單收縮時，當前菜單有子菜單，使用Dropdown組件。
template部分代碼以下
<Menu
active-name="home"
:open-names="['home']"
:theme="menuTheme"
width="auto"
:class="menuitemClasses"
accordion
>
<template v-for="(item, componentIndex) in menu">
<!-- 展開而且有子菜單 -->
<Submenu v-if="!isCollapsed && item.children.length" v-bind:key="componentIndex" :name="componentIndex">
<template slot="title">
<Icon :type="item.icon" />
<span>{{ item.name }}</span>
</template>
<MenuItem v-for="(children, index) in item.children" :key="index" :name="children.to" :to="children.to">
{{ children.name }}
</MenuItem>
</Submenu>
<!-- 展開但沒有子菜單 -->
<MenuItem v-else-if="!isCollapsed" :name="item.to" :to="item.to" v-bind:key="componentIndex">
<Icon :type="item.icon" />
<span>{{ item.name }}</span>
</MenuItem>
<!-- 不展開有子菜單 -->
<Dropdown v-else-if="isCollapsed && item.children.length" v-bind:key="componentIndex" placement="right-start" class="menu-dropdown">
<MenuItem :name="item.to" :to="item.to" >
<Icon :type="item.icon" />
<span>{{ item.name }}</span>
</MenuItem>
<DropdownMenu slot="list">
<DropdownItem v-for="(children, index) in item.children" :key="index" style="padding: 0 0; background-color:#515a6e;">
<MenuItem :name="children.to" :to="children.to">{{ children.name }}</MenuItem>
</DropdownItem>
</DropdownMenu>
</Dropdown>
<!-- 不展開無子菜單 -->
<Tooltip v-else-if="isCollapsed" :content="item.name" placement="right" v-bind:key="componentIndex">
<MenuItem :name="item.to" :to="item.to">
<Icon :type="item.icon" />
<span>{{ item.name }}</span>
</MenuItem>
</Tooltip>
</template>
</Menu>
data部分菜單定義代碼以下
data() {
return {
isCollapsed: false,
keepAliveList: [],
title: "Home",
showSettingPage: false,
showSuggestionPage: false,
menu: [
{
name: "主頁",
to: "home",
icon: "md-apps",
children: []
},
{
name: "菜單分類1",
to: "user",
icon: "ios-create-outline",
children: [
{
name: "子菜單1",
to: "user"
},
{
name: "子菜單2",
to: "menu"
},
{
name: "子菜單3",
to: "shared_report"
},
]
},
{
name: "菜單分類2",
to: "user2",
icon: "ios-archive-outline",
children: [
{
name: "子菜單2-1",
to: "firewall"
},
{
name: "子菜單2-2",
to: "navi_page"
}
]
}
]
};
},
4、優化
可以看到這裏，說明你也是個前端高手。當側邊欄收縮時，還有以下幾個優化項大概提一下，給個方向：
1.dropdown menu背景顏色與側邊欄不一致。
2.dropdown menu上放置鼠標後，有其餘顏色出現。—— menuItem的li元素有padding
3.dropdown menu顯示區域與側邊菜單有重疊。—— dropdown menu中的ivu-dropdown-rel寬度沒有徹底佔滿父元素致使，能夠經過設置有寬度的透明的右邊框解決。
原文出處：https://www.cnblogs.com/wurijie/p/12070196.html