zhangqi
/
kuailelunwen_new_houtai
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

侧边导航修改

pull/46/head
zq 3 weeks ago
parent
9e609bd1e5
commit
5476dd0fa1
1 changed files with 192 additions and 47 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 217
      src/components/SliderMenu.vue

217
src/components/SliderMenu.vue
View File

@ -1,61 +1,103 @@
<template>
<el-menu :default-active="activeMenu" class="el-menu-vertical-demo" @select="handleSelect" :collapse="isCollapse"
<transition name="menu-collapse">
<el-menu :default-active="activeMenu" class="el-menu-vertical-demo custom-menu" @open="handleOpen"
@close="handleClose" @select="handleSelect" :collapse="isCollapse" :collapse-transition="true"
:default-openeds="['1', '2']">
<div style="height: 100%;padding: 0 0 20px;box-sizing: border-box;" >
<div class="menu-top">
<span v-show="!isCollapse">
导航
</span>
<img v-if="!isCollapse" src="../assets/menu-close.svg" @click="changeMenuStatus(true)" alt="">
<img v-else src="../assets/menu-open.svg" @click="changeMenuStatus(false)" alt="">
<GuipToolTip :content="isCollapse ? '展开' : '收起'">
<img v-if="!isCollapse" class="point" src="../assets/menu-close.svg" @click="changeMenuStatus(true)" alt="" >
<img v-else class="point" src="../assets/menu-open.svg" @click="changeMenuStatus(false)" alt="">
</GuipToolTip>
</div>
<el-submenu v-for="item in menuData" :key="item.index" :index="item.index">
<template slot="title">
<i :class="item.icon"></i>
<span>{{ item.title }}</span>
<SvgIcon1
:iconPath="require(`@/assets/menu/${item.icon}.svg`)"
defaultColor="#8A9099"
activeColor="#006AFF"
:isActive="item.index == activeMenu.substr(0,1) && isCollapse"
/>
<span class="title_text" :index="item.index">{{ item.title }}</span>
</template>
<el-menu-item style="padding: 0 22px;" v-for="subItem in item.children" :key="subItem.index"
:index="subItem.index" @click="handleMenuItemClick(subItem)">
<el-menu-item style="padding: 0 22px 0 32px;" v-for="subItem in item.children" :key="subItem.index"
:index="subItem.index">
{{ subItem.title }}
</el-menu-item>
</el-submenu>
</div>
</el-menu>
</transition>
</template>
<script>
import SvgIcon1 from '@/components/SvgIcon1.vue';
import GuipToolTip from '@/components/GuipToolTip.vue';
export default {
name: 'SliderMenu',
components:{
SvgIcon1,
GuipToolTip
},
props: {
menuData: {
type: Array,
default: () => []
},
},
data() {
return {
isCollapse: false,
activeMenu: '',
routerList: [],
menuData: [
{
index: '1',
title: '父级菜单1',
icon: 'el-icon-location',
children: [
{ index: '1-1', title: '子级菜单1-1', path: '/' },
{ index: '1-2', title: 'ui页面', path: '/ui' }
]
},
{
index: '2',
title: '父级菜单2',
icon: 'el-icon-menu',
children: [
{ index: '2-1', title: '子级菜单2-1', path: '/about' },
{ index: '2-2', title: '加盟耶main', path: '/franchise' }
]
}
]
// menuData: [
// {
// index: '1',
// title: '父级菜单1',
// icon: 'el-icon-location',
// children: [
// { index: '1-1', title: '子级菜单1-1', path: '/' },
// { index: '1-2', title: 'ui页面', path: '/ui' }
// ]
// },
// {
// index: '2',
// title: '父级菜单2',
// icon: 'el-icon-menu',
// children: [
// { index: '2-1', title: '子级菜单2-1', path: '/about' },
// { index: '2-2', title: '加盟耶main', path: '/franchise' }
// ]
// }
// ]
};
},
methods: {
changeMenuStatus(flag) {
this.isCollapse = flag;
},
// handleSelect(index) {
// this.activeMenu = index;
// },
handleOpen(key, keyPath) {
console.log(key, keyPath);
},
handleClose(key, keyPath) {
console.log(key, keyPath);
},
handleSelect(index) {
this.activeMenu = index;
console.log(index,'---index');
// 找到被点击的 menu 项对应的 path
const allItems = this.menuData.flatMap(menu => menu.children);
const targetItem = allItems.find(item => item.index === index);
if (targetItem && this.$route.path !== targetItem.path) {
this.$router.push(targetItem.path);
}
},
handleMenuItemClick(item) {
this.$router.push(item.path);
@ -63,22 +105,103 @@ export default {
}
},
mounted() {
this.routerList = this.$router.options.router;//配置路由
console.log(this.$route.path, this.$router.options.router, 'this.$route.path===');
// 初始化时设置默认激活的菜单项
this.activeMenu = this.$route.path;
const allItems = this.menuData.flatMap(menu => menu.children.map(child => ({ ...child, parentIndex: menu.index })));
const current = allItems.find(item => item.path === this.$route.path);
this.activeMenu = current ? current.index : '';
this.defaultOpeneds = current ? [current.parentIndex] : [];
// this.routerList = this.$router.options.router;//配置路由
// console.log(this.$route.path, this.$router.options.router, 'this.$route.path===');
// // 初始化时设置默认激活的菜单项
// this.activeMenu = this.$route.path;
}
}
</script>
<style lang="scss" scoped>
.menu-collapse-leave-active,
.menu-collapse-enter-active {
transition: all 0.7s;
}
.menu-collapse-enter,
.menu-collapse-leave-to {
opacity: 0;
transform: translateX(-30px);
}
.el-menu--vertical{
.el-menu-item{
height: 40px;
line-height: 40px;
}
.el-menu-item.is-active{
font-weight: bold;
}
}
// .slide-fade-enter-active, .slide-fade-leave-active {
// transition: all 1.5s ease;
// }
// .slide-fade-enter, .slide-fade-leave-to {
// opacity: 0;
// transition: all 1.5s ease;
// transform: translateX(-10px);
// }
// .slide-enter-active, .slide-leave-active {
// transition: all 1.5s ease;
// max-height: 200px;
// }
/* 添加收起时的过渡效果 */
// .el-menu--collapse .el-submenu .el-menu {
// transition: all 0.3s ease-in-out;
// overflow: hidden;
// }
// .el-menu--collapse .el-submenu > .el-menu {
// display: none;
// opacity: 0;
// transform: translateY(-10px);
// }
// .el-menu:not(.el-menu--collapse) .el-submenu > .el-menu {
// transition: all 0.3s ease-in-out;
// opacity: 1;
// transform: translateY(0);
// }
// .slide-enter, .slide-leave-to {
// opacity: 0;
// max-height: 0;
// }
.title_img {
width: 16px;
margin-right: 4px;
}
.title_text {
margin-left: 4px;
font-size: 12px;
font-weight: bold;
display: block;
}
.el-menu--collapse .title_text{
display: none;
}
.el-menu--collapse ::v-deep .el-submenu__icon-arrow{
display: none;
}
.el-menu-vertical-demo:not(.el-menu--collapse) {
width: 158px;
min-width: 158px;
min-height: calc(100vh - 62px);
overflow-y: auto;
}
.el-menu-item {
padding: 0 22px;
font-size: 12px;
}
.menu-top {
@ -91,18 +214,23 @@ export default {
padding: 15px 0px;
margin: 0 22px;
display: flex;
font-size: 16px;
font-size: 14px;
color: #1E2226;
font-weight: bold;
line-height: normal;
letter-spacing: 0.08em;
justify-content: space-between;
align-items: center;
img{
width: 14px;
height: 14px;
}
}
::v-deep .el-submenu {
width: 16px;
font-size: 16px;
// width: 16px;
font-size: 12px;
}
::v-deep .el-submenu .el-menu-item {
@ -118,11 +246,11 @@ export default {
::v-deep .el-submenu__title:hover {
background-color: transparent;
cursor: not-allowed;
// cursor: not-allowed;
}
::v-deep .el-submenu__title .el-submenu__icon-arrow.el-icon-arrow-down {
display: none;
// display: none;
}
::v-deep .el-submenu .el-menu-item {
@ -150,4 +278,21 @@ export default {
color: #006AFF;
font-weight: bold;
}
// .el-submenu .el-menu {
// transition: all 0.3s ease;
// }
// .el-menu--collapse .el-submenu > .el-menu {
// display: block !important;
// overflow: hidden;
// transition: all 0.3s ease;
// opacity: 0;
// height: 0;
// transform: translateY(-10px);
// }
// .el-menu--collapse .el-submenu.is-opened > .el-menu {
// opacity: 0;
// height: 0;
// }
</style>
Write Preview
Loading…
Cancel
Save