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. Go 编译器内部知识:向 Go 添加新语句-第 2 部分

    这是探讨 Go 编译器两篇文章的最后一篇.在第 1 部分中,我们通过构建自定义的编译器,向 Go 语言添加了一条新语句.为此,我们按照此图介绍了编译器的前五个阶段: 在"rewrite AS ...

  2. myBatis源码解析-配置文件解析(6)

    前言 本来打算此次写一篇关于SqlSession的解析,但发现SqlSession涉及的知识太多.所以先结合mybatis配置文件(我们项目中常写的如mybatisConfig.xml),来分析下my ...

  3. Jmeter 常用函数(22)- 详解 __intSum

    如果你想查看更多 Jmeter 常用函数可以在这篇文章找找哦 https://www.cnblogs.com/poloyy/p/13291704.htm 作用 计算两个或多个整数值的和 语法格式 ${ ...

  4. CSP-J2019 NOIP普及组初赛真题(阅读程序部分)

    阅读程序(程序输入不超过数组或字符串定义的范围:判断题正确填√,错误填×:除特殊说明外,判断题1.5分,选择题3分,共计40分) #include <cstdio> #include &l ...

  5. myblogplus 第二期 慕舲原创 如何删除官方在你博客内设置的所有广告

    问题描述: 文章下方广告渐多了起来,这也无可厚非,原来只有小小一幅的,毕竟博客园团队很卖力,博客园首页不是在更新吗,博问也在推广(虽然解答者不多,提问者很多) 不过无疑很影响美观,那些可以让他设置,不 ...

  6. Linux环境下MySQL 5.6安装与配置----亲测有效----纯离线安装

    一.安装MySQL 1.下载安装包 mysql-5.6.40-linux-glibc2.12-x86_64.tar.gz 下载地址: https://dev.mysql.com/get/Downloa ...

  7. mysql数据库中数据类型的长度

    在mysql中新建数据表的时候会有长度一说,其实用建表语句建数据表的时候也有涉及 例如: CREATE TABLE user( uid int(4), name varchar(255), passw ...

  8. 23种设计模式 - 对象创建(FactoryMethod - AbstractFactory - Prototype - Builder)

    其他设计模式 23种设计模式(C++) 每一种都有对应理解的相关代码示例 → Git原码 ⌨ 对象创建 通过"对象创建" 模式绕开new,来避免对象创建(new)过程中所导致的紧耦 ...

  9. python编写汉诺塔 Hanoi

    #hanoi.py count = 0 def hanoi(n, src, dst, mid): #src为原1号柱子 dst 目标3号柱子 mid中间2号过渡柱子 global count #对全局 ...

  10. JDK16关于TCP和UDP的优化

    文章转自belaban.blogspot.com Double your performance: virtual threads (fibers) and JDK 15/16!If you use ...