vue實現(xiàn)導航收縮框
更新時間:2022年03月07日 13:25:21 作者:前端方程程
這篇文章主要為大家詳細介紹了vue實現(xiàn)導航收縮框,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
本文實例為大家分享了vue實現(xiàn)導航收縮框的具體代碼,供大家參考,具體內容如下
代碼:
<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">補辦</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">發(fā)票辦理</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">發(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">結算單</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è)信息維護</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)計報表</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: { ? ? // 動態(tài)控制展開與收起和切換對應圖標 ? ? isC() { ? ? ? this.isCollapse = !this.isCollapse ? ? ? this.toggle = !this.toggle ? ? ? this.block = !this.block ? ? ? // 把當前狀態(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的值 進行寬度動態(tài)化 ? ? isCollapse(val){ ? ? ? console.log("父組件",val); ? ? ? if(val===false){ ? ? ? ? ? this.asidewidth="180px" ? ? ? }else{ ? ? ? ? this.asidewidth="60px" ? ? ? } ? ? } ? }
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。
相關文章
Vue+Flask實現(xiàn)簡單的登錄驗證跳轉的示例代碼
本篇文章主要介紹了Vue+Flask實現(xiàn)簡單的登錄驗證跳轉的示例代碼,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2018-01-01vue axios數(shù)據(jù)請求及vue中使用axios的方法
axios 是一個基于Promise 用于瀏覽器和 nodejs 的 HTTP 客戶端,在vue中數(shù)據(jù)請求需要先安裝axios。這篇文章主要介紹了vue axios數(shù)據(jù)請求及vue中使用axios的方法,需要的朋友可以參考下2018-09-09Vue中Table組件行內右鍵菜單實現(xiàn)方法(基于 vue + AntDesign)
這篇文章主要介紹了Vue中Table組件行內右鍵菜單實現(xiàn)方法,該項目是基于 vue + AntDesign的,具體實例代碼給大家介紹的非常詳細 ,需要的朋友可以參考下2019-11-11vue 中 get / delete 傳遞數(shù)組參數(shù)方法
這篇文章主要介紹了vue 中 get / delete 傳遞數(shù)組參數(shù)方法,本文給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2021-03-03Element?el-date-picker?日期選擇器的使用
本文主要介紹了Element?el-date-picker?日期選擇器的使用,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2023-04-04Vue+jsPlumb實現(xiàn)連線效果(支持滑動連線和點擊連線)
jsPlumb 是一個比較強大的繪圖組件,它提供了一種方法,主要用于連接網(wǎng)頁上的元素。本文將利用jsPlumb實現(xiàn)連線效果,同時支持滑動連線和點擊連線,感興趣的可以了解一下2023-01-01