vue实现导航收缩框
更新时间:2022年3月7日 16:52 点击:936 作者:前端方程程
本文实例为大家分享了vue实现导航收缩框的具体代码,供大家参考,具体内容如下
代码:
<template> <div class="leftAside"> <el-header style="height: 40px"> <i class="el-icon-s-fold shousuo" @click="isC" v-show="block"></i> <i class="el-icon-s-unfold shousuo" @click="isC" v-show="toggle"></i> </el-header> <el-menu unique-opened router class="el-menu-vertical-demo el-menu-vertical menuboss" background-color="#fff" text-color="#fff" active-text-color="#2A62CE" default-active :collapse="isCollapse" > <el-menu-item index="/shouye"> <i class="el-icon-s-home"></i> <span slot="title">首页</span> </el-menu-item> <el-submenu index="/terminal" v-hasPermi="['system:ca:ca']"> <template slot="title"> <i class="el-icon-connection"></i> <span> CA办理</span> </template> <el-menu-item index="/terminal" class="navds">新申请</el-menu-item> <el-menu-item index="/renewal" class="navds">续期</el-menu-item> <el-menu-item index="/reissued" class="navds">补办</el-menu-item> <el-menu-item index="/report" class="navds">挂失/取消挂失</el-menu-item> <el-menu-item index="/logout" class="navds">注销</el-menu-item> <el-menu-item index="/deblocking" class="navds">解锁</el-menu-item> <el-menu-item index="/support" class="navds">CA帮助中心</el-menu-item> <!-- <el-menu-item index="/settlement" class="navds">结算办理</el-menu-item> <el-menu-item index="/bill" class="navds">发票办理</el-menu-item> <el-menu-item index="/helpCenter" class="navds">结算办理</el-menu-item> --> </el-submenu> <el-menu-item index="/beihuo" v-hasPermi="['system:stockup:stockup']"> <i class="el-icon-s-order"></i> <span slot="title">备货订单</span> </el-menu-item> <el-menu-item index="/fahuo" v-hasPermi="['system:shipnotice:shipnotice']"> <i class="el-icon-s-promotion"></i> <span slot="title">发货通知单</span> </el-menu-item> <el-menu-item index="/tihuo" v-hasPermi="['system:delivery:delivery']"> <i class="el-icon-document-checked"></i> <span slot="title">提货通知单</span> </el-menu-item> <el-menu-item index="/myjiesuan" v-hasPermi="['system:settlebill:settlebill']"> <i class="el-icon-shopping-cart-full"></i> <span slot="title">结算单</span> </el-menu-item> <el-menu-item index="/myqiye"> <i class="el-icon-office-building" v-hasPermi="['system:coinfomaint:coinfomaint']"></i> <span slot="title">企业信息维护</span> </el-menu-item> <el-menu-item index="/mytongji" v-hasPermi="['system:statistics:statistics']"> <i class="el-icon-s-marketing"></i> <span slot="title">统计报表</span> </el-menu-item> <el-menu-item index="/mypingjia" v-hasPermi="['system:suppliereva:suppliereva']"> <i class="el-icon-star-on"></i> <span slot="title">供应商评价</span> </el-menu-item> <el-menu-item index="myrenyuan" v-hasPermi="['system:supplierpm:supplierpm']"> <i class="el-icon-s-custom"></i> <span slot="title">供应商人员管理</span> </el-menu-item> <el-submenu index="/electronic" v-hasPermi="['system:maintenance:tool']"> <template slot="title"> <i class="el-icon-suitcase-1"></i> <span> 运维工具</span> </template> <el-menu-item index="/electronic" v-hasPermi="['system:eseal:conf']" class="maintenance" >电子印章配置</el-menu-item > </el-submenu> </el-menu> </div> </template> <script> export default { data() { return { isCollapse: false, //导航栏默认为展开 toggle: false, //第二个图标默认隐藏 block: true //默认显示第一个图标 } }, methods: { // 动态控制展开与收起和切换对应图标 isC() { this.isCollapse = !this.isCollapse this.toggle = !this.toggle this.block = !this.block // 把当前状态传给父组件 lay this.$emit('isCollapse', this.isCollapse) } } } </script> <style lang="scss" scoped> .el-menu-vertical:not(.el-menu--collapse) { width: 180px; } .leftAside { width: 180px; height: 100%; padding-top: 20px; overflow: auto; background-image: url('../../assets/update/imgs/bjleft.jpg'); .el-header { .shousuo { cursor: pointer; color: #fff; opacity: 0.8; font-size: 20px; transition: 0.37s; } .shousuo:hover { font-size: 22px; transition: 0.37s; } } .el-menu { border-right: 0 !important; background-color: transparent !important; } ::v-deep.el-menu-item { height: 44px; line-height: 40px; background-color: transparent !important; i { width: 14px; height: 14px; margin-right: 15px; color: #fff !important; } img { width: 14px; height: 14px; line-height: 14px; margin-right: 15px; margin-left: 2px; } } .el-menu-item:hover { background: #2b5dbe !important; border-radius: 10px 0px 0px 10px; } .el-menu-item.is-active { background: #f5f5f5 !important; border-radius: 10px 0px 0px 10px; i { color: #2a62ce !important; } } ::-webkit-scrollbar { display: none !important; } } ::v-deep .el-submenu__title { height: 44px; line-height: 40px; background-color: transparent !important; i { width: 14px; height: 14px; margin-right: 15px; color: #fff !important; } img { width: 14px; height: 14px; line-height: 14px; margin-right: 15px; margin-left: 2px; } } ::v-deep .el-menu--inline { background: #1444aa !important; } </style> 在路由出口页面 <LeftNav @isCollapse="isCollapse"></LeftNav> methods:{ // 接收子组件leftnav的值 进行宽度动态化 isCollapse(val){ console.log("父组件",val); if(val===false){ this.asidewidth="180px" }else{ this.asidewidth="60px" } } }
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持猪先飞。
原文出处:https://blog.csdn.net/weixin_44040867/article/details/120420
上一篇: vue+element实现输入密码锁屏
下一篇: vue项目记录锁定和解锁功能实现
相关文章
- 这篇文章主要介绍了vue中activated的用法,帮助大家更好的理解和使用vue框架,感兴趣的朋友可以了解下...2021-01-03
基于vue-simple-uploader封装文件分片上传、秒传及断点续传的全局上传插件功能
这篇文章主要介绍了基于vue-simple-uploader封装文件分片上传、秒传及断点续传的全局上传插件,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2021-02-23Antd-vue Table组件添加Click事件,实现点击某行数据教程
这篇文章主要介绍了Antd-vue Table组件添加Click事件,实现点击某行数据教程,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-11-17- 这篇文章主要介绍了Vue基于localStorage存储信息代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下...2020-11-16
- 这篇文章主要介绍了vue 实现动态路由的方法,文中示例代码非常详细,帮助大家更好的理解和学习,感兴趣的朋友可以了解下...2020-07-06
- 这篇文章主要介绍了vue 监听 Treeselect 选择项的改变操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-09-01
- 这篇文章主要介绍了Vue组件跨层级获取组件操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-07-28
- 这篇文章主要介绍了vue 获取到数据但却渲染不到页面上的解决方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2020-11-19
antdesign-vue结合sortablejs实现两个table相互拖拽排序功能
这篇文章主要介绍了antdesign-vue结合sortablejs实现两个table相互拖拽排序功能,本文通过实例图文相结合给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2021-01-09vuejs element table 表格添加行,修改,单独删除行,批量删除行操作
这篇文章主要介绍了vuejs element table 表格添加行,修改,单独删除行,批量删除行操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-07-18- 这篇文章主要介绍了vue treeselect获取当前选中项的label实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-09-01
- 这篇文章主要给大家介绍了关于Vue中slot-scope的深入理解,这个教程非常适合初学者,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-04-17
- 最常见的多环境配置,就是开发环境配置,和生产环境配置,本文主要介绍了vue项目多环境配置的实现,感兴趣的可以了解一下...2021-07-20
vue项目页面嵌入代码块vue-prism-editor的实现
这篇文章主要介绍了vue项目页面嵌入代码块vue-prism-editor的实现,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2020-10-30- 这篇文章主要介绍了Vue 3.0 中 jsx 语法使用,帮助大家更好的理解和使用vue框架,感兴趣的朋友可以了解下...2020-11-13
vue Treeselect下拉树只能选择第N级元素实现代码
这篇文章主要介绍了vue Treeselect下拉树只能选择第N级元素实现代码,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-09-01解决vue的router组件component在import时不能使用变量问题
这篇文章主要介绍了解决vue的router组件component在import时不能使用变量问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-07-27Ant design vue table 单击行选中 勾选checkbox教程
这篇文章主要介绍了Ant design vue table 单击行选中 勾选checkbox教程,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-10-25- 这篇文章主要为大家详细介绍了vue实现同时设置多个倒计时,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2021-05-20
- 这篇文章主要介绍了WebStorm无法正确识别Vue3组合式API的解决方案,帮助大家更好的理解和学习使用vue框架,感兴趣的朋友可以了解下...2021-02-18