看了网上很多资料,代码都不全,我找了一个靠谱的代码,然后自己改了一下,居然成功了!距离成功就一步之遥啊,没想到能自己东拼西凑的写出来!
想讲一下思路吧
开始以为iview不存在导航收起功能,但后来发现他是有的,只不多只支持一级菜单,含二级菜单的收起会很难看
iView / View Design 一套企业级 UI 组件库和前端解决方案
所以我还是尽量使用原装的收起功能,稍加改造使他支持二级菜单的收起,在网上我看到这个代码
但里面的代码不全,我又根据官网补充了一下最后可以了,直接上代码!
<template>
<Layout>
<Sider breakpoint="md" ref="side1" collapsible :collapsed-width="78" v-model="isCollapsed" :style="{'background':'#ffffff'}">
<Menu :theme="theme" width="auto" :class="menuitemClasses">
<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:#ffffff;">
<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>
</Sider>
<Layout>
<Content>
<router-view></router-view>
</Content>
</Layout>
</Layout>
</template>
<script>
export default {
data() {
return {
isCollapsed: false,
menu: [
{
name: "系统管理",
to: "",
icon: "ios-create-outline",
children: [
{
name: "应用管理",
to: "/applicationManage/List"
},
{
name: "主机管理",
to: "/applicationManage/Other"
}
]
},
{
name: "应用监控",
to: "",
icon: "ios-archive-outline",
children: [
{
name: "异常清单",
// to: "/applicationManage/Other1"
},
{
name: "告警记录",
// to: "/applicationManage/Other2"
}
]
},
{
name: "构建部署",
// to: "/applicationManage/Other3",
icon: "md-apps",
children: []
},
]
}
},
}
</script>
<style>
.ivu-layout-sider-trigger {
color: #525a6e;
background: #ffffff;
}
</style>