【易购管理系统】导航折叠效果

在el-menu中添加 v-model=“isCollapse”

<el-menu router="true"default-active="/"class="el-menu-vertical-demo"background-color="#545c64"text-color="#fff"active-text-color="#ffd04b"v-model="isCollapse">

然后在下面

export default {data() {return {isCollapse: false}}
}

我们在顶部放一个小按钮，让这个小按钮来控制是否折叠，但是这个小按钮是放在content里面的，也就是我们要在Content里面触发一个事件，这个事件改变了Mymenu.vue中的一个变量
在我们的Content中

<div><div class="header"><i class="iconfont icon-right-indent"></i><i class="iconfont icon-left-indent"></i>顶部区域</div><!-- 内容区域 路由出口--><div class="content"><router-view></router-view></div>

也就是点左边的按钮，往里推；点右边的按钮，往外面扩。并且初始状态只能显示一个。因为是兄弟组件之间传值，所以我们通过父组件做一个中转。

因为我们的Mymenu.vue肯定是要接收一个数据，根据这个数据来让导航显示和隐藏

export default {//接收的一个数据，不是自己的数据props: ["isCollapse"],
};

而这个数据从哪里来呢？是从它的父组件index.vue中来的

 <!-- 左侧导航区域 --><Mymenu class="menu" :isCollapse="isCollapse"></Mymenu>

  data() {return {isCollapse: false,}},

在Content.vue中，点击切换按钮时，修改父组件的数据

 <i @click="changeMenu"  class="iconfont icon-right-indent"></i><i @click="changeMenu" class="iconfont icon-left-indent"></i>

export default {methods: {changeMenu() {//点击切换按钮的时候 修改父组件的数据   isCollapse//传入一个事件，让他修改父亲的数据this.$emit("changeCollapse");}}
}

也就是在Content.vue中传入事件 this.$emit(“changeCollapse”);，让它改变index.vue中的 isCollapse: false,
回到父亲里面接收这个事件

<!-- 右侧内容区域 --><Content class="content" @changeCollapse="changeCollapse" :isCollapse="isCollapse"></Content>

接受这个事件之后做什么呢？

methods:{changeCollapse(){this.isCollapse = !this.isCollapse;}}

最终的效果：

这两个按钮只能显示一个
Content.vue中

 <i v-if="!isCollapse" @click="changeMenu"  class="iconfont icon-right-indent"></i><i v-else @click="changeMenu" class="iconfont icon-left-indent"></i>

props: ["isCollapse"],methods: {changeMenu() {//点击切换按钮的时候 修改父组件的数据   isCollapsethis.$emit("changeCollapse");}}

效果为：

设置一下相应的样式

在index.vue中

<!-- 右侧内容区域 --><Content class="content" @changeCollapse="changeCollapse"  :class="{isActive:isCollapse}"   :isCollapse="isCollapse"></Content>

 .isActive{margin-left: 64px;}

【易购管理系统】导航折叠效果相关推荐

【易购管理系统】路由界面基础搭建
路由基础搭建我们分析一下这个项目这个页面点到退出的页面以后,和我们上面窗口同级的有个登陆界面我们在配置的过程中,一个大的主界面和我们的登录界面是同级的.所以我们的路由配置有两个一个是页面布局配置 ...
【易购管理系统】商品列表
我们来写一下商品管理界面在Goods.vue中 <template><div><div class="header& ...
jQuery仿苏宁易购导航
最近看了些网上的各类导航网站源码,自己学习制作了一个仿苏宁易购的导航栏 jQuery部分代码 1 $(function(){ 2 $(".CategoryTree>ul>li&q ...
仿蘑菇街，京东，苏宁易购，海尔商城等33套大气购物商城网站模板，附源码免费下载地址...
来源 | web前端开发在很早之前,跟大家分享过很多有关于网站模板的素材资源,有企业网站,也有购物商城,还有后台管理模板,以及大数据页面模板等等. 今天我们再跟大家分享32套商城网站源码,有的是比较 ...
HTML5期末大作业：电商购物网站设计——易购电商购物网页设计与实现(31页) 含论文+答辩+PPT 计算机毕设网页设计源码 HTML+CSS+JavaScript web课程设计网页规划与设计...
HTML5期末大作业:电商网站设计--易购电商购物网页设计与实现(31页) 含论文+PPT 学生DW网页设计作业成品 HTML+CSS+JavaScript web课程设计网页规划与设计计算机毕设网 ...
网页设计作业仿苏宁易购商城网站设计——仿苏宁易购官网商城(1页) HTML+CSS+JavaScript web网页大作业
HTML5期末大作业:仿苏宁易购商城网站设计--仿苏宁易购官网商城(1页) HTML+CSS+JavaScript web网页大作业常见网页设计作业题材有个人. 美食. 公司. 学校. 旅游. 电 ...
爽易购商城--后台管理
一.项目简介 1.项目背景 1).电商模式市面上有5种常见的电商模式:B2B.B2C.C2B.C2C.O2O: B2B模式 Business to Business,是指商家之间的商业关系,如:阿里 ...
基于JAVA社区团购管理系统
社区团购管理系统是为社区团长提供的在线订单管理系统,本系统的研发设计能够增加社区团长的团购宣传和推广,提升客流量和订单量,增加团长的营业收益.原有的团购系统管理采用手工管理的方式,各种团购宣传和订单接 ...
苏宁11.11：苏宁易购订单搜索系统架构及实现
背景随着苏宁易购平台规模的飞速发展,平台的订单量呈现指数级的增长,存储容量已达TB级,订单量更是到了万亿级别,尤其在双11大促流量洪峰的场景下,面临两个挑战: 1.如何存储如此巨大的数据量 2.如何 ...

【易购管理系统】导航折叠效果

【易购管理系统】导航折叠效果相关推荐

最新文章

热门文章