vue實(shí)現(xiàn)導(dǎo)航收縮框
本文實(shí)例為大家分享了vue實(shí)現(xiàn)導(dǎo)航收縮框的具體代碼,供大家參考,具體內(nèi)容如下
代碼:
<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">續(xù)期</el-menu-item> ? ? ? ? <el-menu-item index="/reissued" class="navds">補(bǔ)辦</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">結(jié)算辦理</el-menu-item> ? ? ? ? <el-menu-item index="/bill" class="navds">發(fā)票辦理</el-menu-item> ? ? ? ? <el-menu-item index="/helpCenter" class="navds">結(jié)算辦理</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">發(fā)貨通知單</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">結(jié)算單</span> ? ? ? </el-menu-item> ? ? ? <el-menu-item index="/myqiye"> ? ? ? ? <i class="el-icon-office-building" v-hasPermi="['system:coinfomaint:coinfomaint']"></i> ? ? ? ? <span slot="title">企業(yè)信息維護(hù)</span> ? ? ? </el-menu-item> ? ? ? <el-menu-item index="/mytongji" v-hasPermi="['system:statistics:statistics']"> ? ? ? ? <i class="el-icon-s-marketing"></i> ? ? ? ? <span slot="title">統(tǒng)計(jì)報(bào)表</span> ? ? ? </el-menu-item> ? ? ? <el-menu-item index="/mypingjia" v-hasPermi="['system:suppliereva:suppliereva']"> ? ? ? ? <i class="el-icon-star-on"></i> ? ? ? ? <span slot="title">供應(yīng)商評價(jià)</span> ? ? ? </el-menu-item> ? ? ? <el-menu-item index="myrenyuan" v-hasPermi="['system:supplierpm:supplierpm']"> ? ? ? ? <i class="el-icon-s-custom"></i> ? ? ? ? <span slot="title">供應(yīng)商人員管理</span> ? ? ? </el-menu-item> ? ? ? <el-submenu index="/electronic" v-hasPermi="['system:maintenance:tool']"> ? ? ? ? <template slot="title"> ? ? ? ? ? <i class="el-icon-suitcase-1"></i> ? ? ? ? ? <span> 運(yùn)維工具</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, //導(dǎo)航欄默認(rèn)為展開 ? ? ? toggle: false, //第二個(gè)圖標(biāo)默認(rèn)隱藏 ? ? ? block: true //默認(rèn)顯示第一個(gè)圖標(biāo) ? ? } ? }, ? methods: { ? ? // 動(dòng)態(tài)控制展開與收起和切換對應(yīng)圖標(biāo) ? ? isC() { ? ? ? this.isCollapse = !this.isCollapse ? ? ? this.toggle = !this.toggle ? ? ? this.block = !this.block ? ? ? // 把當(dāng)前狀態(tài)傳給父組件 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的值 進(jìn)行寬度動(dòng)態(tài)化 ? ? isCollapse(val){ ? ? ? console.log("父組件",val); ? ? ? if(val===false){ ? ? ? ? ? this.asidewidth="180px" ? ? ? }else{ ? ? ? ? this.asidewidth="60px" ? ? ? } ? ? } ? }
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
Vue+Flask實(shí)現(xiàn)簡單的登錄驗(yàn)證跳轉(zhuǎn)的示例代碼
本篇文章主要介紹了Vue+Flask實(shí)現(xiàn)簡單的登錄驗(yàn)證跳轉(zhuǎn)的示例代碼,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-01-01vue axios數(shù)據(jù)請求及vue中使用axios的方法
axios 是一個(gè)基于Promise 用于瀏覽器和 nodejs 的 HTTP 客戶端,在vue中數(shù)據(jù)請求需要先安裝axios。這篇文章主要介紹了vue axios數(shù)據(jù)請求及vue中使用axios的方法,需要的朋友可以參考下2018-09-09Vue中Table組件行內(nèi)右鍵菜單實(shí)現(xiàn)方法(基于 vue + AntDesign)
這篇文章主要介紹了Vue中Table組件行內(nèi)右鍵菜單實(shí)現(xiàn)方法,該項(xiàng)目是基于 vue + AntDesign的,具體實(shí)例代碼給大家介紹的非常詳細(xì) ,需要的朋友可以參考下2019-11-11Vue結(jié)合echarts實(shí)現(xiàn)繪制水滴圖
這篇文章主要為大家詳細(xì)介紹了Vue如何結(jié)合echarts實(shí)現(xiàn)水滴圖的繪制,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2023-07-07vue 中 get / delete 傳遞數(shù)組參數(shù)方法
這篇文章主要介紹了vue 中 get / delete 傳遞數(shù)組參數(shù)方法,本文給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2021-03-03Element?el-date-picker?日期選擇器的使用
本文主要介紹了Element?el-date-picker?日期選擇器的使用,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-04-04Vue+jsPlumb實(shí)現(xiàn)連線效果(支持滑動(dòng)連線和點(diǎn)擊連線)
jsPlumb 是一個(gè)比較強(qiáng)大的繪圖組件,它提供了一種方法,主要用于連接網(wǎng)頁上的元素。本文將利用jsPlumb實(shí)現(xiàn)連線效果,同時(shí)支持滑動(dòng)連線和點(diǎn)擊連線,感興趣的可以了解一下2023-01-01