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"
? ? ? }
? ? }
? }

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: