1. 递归组件实战

views/layout.vue

<template>
<div class="layout-wrapper">
<Layout class="layout-outer">
<Sider collapsible v-model="collapsed" hide-trigger breakpoint="sm">
<side-menu :collapsed="collapsed" :list="menuList"></side-menu>
</Sider>
<Layout>
<Header class="header-wrapper">
<Icon type="md-menu" :size="32" @click.native="handleCollapsed" :class="triggerClasses"/>
</Header>
<Content class="content-con">
<Card shadow class="page-card">
<router-view/>
</Card>
</Content>
</Layout>
</Layout>
</div>
</template>
<script>
import SideMenu from '_c/side-menu'
export default {
data () {
return {
collapsed: true,
menuList: [
{
title: '111',
name: 'menu1',
icon: 'md-analytics'
},
{
title: '222',
name: 'menu2',
icon: 'md-analytics'
},
{
title: '333',
name: 'menu3',
icon: 'md-appstore',
children: [
{
title: '333-111',
name: 'menu31',
icon: 'md-apps'
},
{
title: '333-222',
name: 'menu32',
icon: 'md-apps',
children: [
{
title: '333-222-111',
name: 'menu321',
icon: 'ios-archive'
}
]
}
]
}
]
}
},
computed: {
triggerClasses () {
return ['trigger-icon', this.collapsed ? 'rotate' : '']
}
},
components: {
SideMenu
},
methods: {
handleCollapsed () {
this.collapsed = !this.collapsed
}
}
}
</script>
<style lang="less" scoped>
.layout-wrapper,
.layout-outer {
height: 100%;
.header-wrapper {
background: #fff;
box-shadow: 0 1px 1px 1px rgba(0, 0, 0, 0.1);
padding: 0 23px;
.trigger-icon {
cursor: pointer;
transition: transform 0.3s ease;
&.rotate {
transform: rotateZ(-90deg);
transition: transform 0.3s ease;
}
}
}
.content-con {
padding: 10px;
.page-card {
min-height: ~"calc(100vh - 84px)";
}
}
}
</style>

components/side-menu/index.js

import SideMenu from './side-menu.vue'

export default SideMenu

components/side-menu/side-menu.vue

<template>
<div class="side-menu-wrapper">
<slot></slot>
<Menu width="auto" theme="dark" v-show="!collapsed" @on-select="handleSelect">
<template v-for="item in list">
<re-submenu
v-if="item.children"
:key="`menu_${item.name}`"
:name="item.name"
:parent="item"
>
<menu-item></menu-item>
</re-submenu>
<menu-item v-else :key="`menu_${item.name}`" :name="item.name">
<Icon :type="item.icon"/>
{{ item.title }}
</menu-item>
</template>
</Menu>
<div class="drop-wrapper" v-show="collapsed">
<template v-for="item in list">
<re-dropdown @on-select="handleSelect" v-if="item.children" icon-color="#fff" :show-title="false" :key="`drop_${item.name}`" :parent="item"></re-dropdown>
<Tooltip v-else transfer :content="item.title" placement="right" :key="`drop_${item.name}`">
<span @click="handleClick(item.name)" class="drop-menu-span">
<Icon :type="item.icon" color="#fff" :size="30"/>
</span>
</Tooltip>
</template>
</div>
</div>
</template>
<script>
import ReSubmenu from './re-submenu'
import ReDropdown from './re-dropdown'
export default {
name: 'SideMenu',
components: {
ReSubmenu,
ReDropdown
},
props: {
collapsed: {
type: Boolean,
default: false
},
list: {
type: Array,
default: () => []
}
},
methods: {
handleSelect (name) {
console.log(name)
},
handleClick (name) {
console.log(name)
}
}
}
</script>
<style lang="less">
.side-menu-wrapper {
.ivu-tooltip,
.drop-menu-span {
display: block;
width: 100%;
text-align: center;
padding: 10px 0;
}
.drop-wrapper > .ivu-dropdown {
display: block;
padding: 10px;
margin: 0 auto;
}
}
</style>
  • 不收缩
<template>
<Submenu :name="parent.name">
<template slot="title">
<Icon :type="parent.icon" />
{{ parent.title }}
</template>
<template v-for="item in parent.children">
<re-submenu
v-if="item.children"
:key="`menu_${item.name}`"
:name="item.name"
:parent="item"
>
</re-submenu>
<menu-item v-else :key="`menu_${item.name}`" :name="item.name">
<Icon :type="item.icon" />
{{ item.title }}
</menu-item>
</template>
</Submenu>
</template> <script>
export default {
name: 'ReSubmenu',
props: {
parent: {
type: Object,
default: () => ({})
}
}
}
</script>
  • 收缩
<template>
<Dropdown @on-click="handleClick" placement="right-start">
<span class="drop-menu-span" :style="titleStyle">
<Icon :type="parent.icon" :color="iconColor" :size="30"></Icon>
<span color="#515a6e" v-if="showTitle">{{ parent.title }}</span>
</span>
<DropdownMenu slot="list">
<template v-for="item in parent.children">
<re-dropdown v-if="item.children" :key="`drop_${item.name}`" :parent="item"></re-dropdown>
<DropdownItem v-else :key="`drop_${item.name}`" :name="item.name">
<Icon :type="item.icon" color="#515a6e" :size="30"></Icon>
{{ item.title }}
</DropdownItem>
</template>
</DropdownMenu>
</Dropdown>
</template> <script>
export default {
name: 'ReDropdown',
props: {
parent: {
type: Object,
default: () => ({})
},
iconColor: {
type: String,
default: '#515a6e'
},
showTitle: {
type: Boolean,
default: true
}
},
computed: {
titleStyle () {
return {
textAlign: this.showTitle ? 'left' : 'center',
paddingLeft: this.showTitle ? '16px' : ''
}
}
},
methods: {
handleClick (name) {
if (!this.showTitle) this.$emit('on-select', name)
}
}
}
</script>

Vue iview可收缩多级菜单的实现的更多相关文章

  1. iview可收缩侧边菜单实现(支持二级菜单)

    想用iview做一个可以伸缩的侧边菜单栏,效果如下: 1.侧边栏收缩前:可以通过点击菜单分类展开子菜单项: 2.可以让用户点击图标动态收缩菜单栏: 3.侧边栏收缩后:只显示菜单分类的图标,鼠标放置在菜 ...

  2. [前端随笔][Vue] 多级菜单实现思路——组件嵌套

    说在前面 本篇记录学习了vue-element-admin中的多级菜单的实现 [传送门] @vue/cli 4.2.2:vuex:scss:组件嵌套 正文 创建项目 npm create 项目名 // ...

  3. Vue2 实现树形菜单(多级菜单)功能模块

    结构示意图 ├── index.html ├── main.js ├── router │ └── index.js # 路由配置文件 ├── components # 组件目录 │ ├── App. ...

  4. Vue + iview框架,搭建项目遇到的相关问题记录 - 国际化router.js不能实现

    例子展示: 概述: 最近在使用vue + iview框架进行web开发,并且有一个需求,需要实现web端的国际化,在完成相关配置文件后,发现router.js 中无法配置,并且会出现异常,在经过百度找 ...

  5. 前端开发css实战:使用css制作网页中的多级菜单

    前端开发css实战:使用css制作网页中的多级菜单 在日常工作中,大家都会遇到一些显示隐藏类菜单,比如页头导航.二维码显示隐藏.文本提示等等......而这些效果都是可以使用纯css实现的(而且非常简 ...

  6. MVC5+EF6 入门完整教程13 -- 动态生成多级菜单

    稍微有一定复杂性的系统,多级菜单都是一个必备组件. 本篇专题讲述如何生成动态多级菜单的通用做法. 我们不用任何第三方的组件,完全自己构建灵活通用的多级菜单. 需要达成的效果:容易复用,可以根据mode ...

  7. java 24 - 7 GUI之 创建多级菜单窗体

    需求: 创建多级菜单 步骤: A:创建窗体对象(并设置属性和布局) B:创建菜单栏 C:创建菜单和子菜单 D:逐步添加菜单(子菜单添加到菜单中,菜单添加到菜单栏中) E:窗体中设置菜单栏(菜单栏并不是 ...

  8. 单片机C语言下LCD多级菜单的一种实现方法

    摘要:     介绍了在C 语言环境下,在LCD 液晶显示屏上实现多级嵌套菜单的一种简便方法,提出了一个结构紧凑.实用的程序模型. 关键词: 液晶显示屏; 多级菜单; 单片机; C 语言; LCD 中 ...

  9. zTree下拉菜单多级菜单多选实现

    惯例,先上图: 这是在一个项目中,为了满足样式美观.多级菜单以及多选而将zTree插件更改过后的效果. 在实际的开发过程中,本来zTree也是可以满足需求的,但是zTree多选的话需要checkbox ...

随机推荐

  1. unity探索者之protobuf的序列化和反序列化导致unity崩溃的问题研究

    版权声明:本文为原创文章,转载请声明http://www.cnblogs.com/unityExplorer/p/7574569.html 这两天博主在接微信支付SDK的时候碰到一个非常恶心又诡异的问 ...

  2. C++统计单词数

    [题目描述] 一般的文本编辑器都有查找单词的功能,该功能可以快速定位特定单词在文章中的位置,有的还能统计出特定单词在文章中出现的次数.现在,请你编程实现这一功能,具体要求是:给定一个单词,请你输出它在 ...

  3. machine vision plan

    以OpenCV+C#/C++为主,Halcon+C#/C++.LabVIEW+NI Vision,其他还不了解 目前:Halcon+C# 1.完成:测量定位,表面质量检测 2.完成1后开始:OpenC ...

  4. Python 源代码代码打包成 whl 文件

    1.检查 python setup.py check 2.打包 python setup.py sdist bdist_wheel || true

  5. Linux下启动、关闭SVN服务

    1.命令:ps -ef|grep svnserve,查看SVN是否允许,执行如下: 2.命令:svnserve -d -r /home/svn,启动SVN,/home/svn是SVN安装路径,执行如下 ...

  6. Excel提取身份证年龄和性别③

    问题场景 从user表中的身份信息中拿到用户的年龄和性别: 以下方法也可适用于提取其他数据,目的在于通过实例操作了解更多函数用法: 以下图中数据都为测试数据,不具备真实性! 场景一 从user表中的1 ...

  7. Hello,Vue

    Vue版本 Vue完整版 有编译器compiler,体积大功能多,可以直接把html字符串变成DOM节点 视图,此处为html字符串,写在index.html里或者写在new Vue构造选项templ ...

  8. 微信小程序发送订阅消息(之前是模板消息)

    之前的模板消息已经废弃,现在改为订阅消息,订阅消息发布前,需要用户确认后才能接收订阅消息. 小程序端 index.wxml <button bindtap="send"> ...

  9. 配置tomacat外部应用

    原来我们的项目一般放置在tomcat文件夹的webapp下,现在我放到外面,也希望tomact可以找到他

  10. Labview学习之路(八)如何让控件显示在修饰符的前面

    在Labview2017版本中,前面板选择修饰控件,会出现部分修饰控件会掩盖其他控件,情况如下: 我们右键点击和属性中都没有相关属性的改变,为什么是这样我也不清除: 上网查了一下,看到其他版本会有显示 ...