本文实例为大家分享了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" } } }
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持阿兔在线工具。