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

侧边导航升级版本

pull/46/head
zq 1 month ago
parent
cb88f58d86
commit
b60d15a3f3
3 changed files with 92 additions and 113 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 195
      src/components/SliderMenu.vue
  2. 8
      src/store/index.js
  3. 2
      src/style/theme/index.css

195
src/components/SliderMenu.vue
View File

@ -1,36 +1,43 @@
<template> <template>
<transition name="menu-collapse"> <transition name="menu-collapse">
<el-menu :default-active="activeMenu" class="el-menu-vertical-demo custom-menu" @open="handleOpen" <!-- :default-active="activeMenu" -->
@close="handleClose" @select="handleSelect" :collapse="isCollapse" :collapse-transition="true" <el-menu class="el-menu-vertical-demo custom-menu" @open="handleOpen"
:default-openeds="['1', '2']"> :default-active="currentMenuItem?.index"
<div style="height: 100%;padding: 0 0 20px;box-sizing: border-box;" > @close="handleClose" @select="handleSelect" :collapse="isCollapse" :collapse-transition="true"
>
<div style="height: 100%;padding: 0 0 20px;box-sizing: border-box;">
<div class="menu-top"> <div class="menu-top">
<span v-show="!isCollapse"> <span v-show="!isCollapse">
导航 导航
</span> </span>
<GuipToolTip :content="isCollapse ? '展开' : '收起'"> <GuipToolTip :content="isCollapse ? '展开' : '收起'">
<img v-if="!isCollapse" class="point" src="../assets/menu-close.svg" @click="changeMenuStatus(true)" alt="" > <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=""> <img v-else class="point" src="../assets/menu-open.svg" @click="changeMenuStatus(false)" alt="">
</GuipToolTip> </GuipToolTip>
</div> </div>
<el-submenu v-for="item in menuData" :key="item.index" :index="item.index"> <template v-for="item in menuData" >
<template slot="title"> <el-submenu v-if="item.children" :key="item.index" :index="item.index">
<SvgIcon1 <template slot="title">
:iconPath="require(`@/assets/menu/${item.icon}.svg`)" <SvgIcon1 :iconPath="require(`@/assets/menu/${item.icon}.svg`)" defaultColor="#8A9099"
defaultColor="#8A9099" activeColor="#006AFF" :isActive="item.index == currentMenuItem?.index.substr(0,1) && isCollapse" />
activeColor="#006AFF" <span class="title_text" >{{ item.title }}</span>
:isActive="item.index == activeMenu.substr(0,1) && isCollapse" </template>
/>
<span class="title_text" :index="item.index">{{ item.title }}</span>
</template>
<el-menu-item style="padding: 0 22px 0 32px;" v-for="subItem in item.children" :key="subItem.index" <el-menu-item style="padding: 0 22px 0 32px;" v-for="subItem in item.children" :key="subItem.index"
:index="subItem.index"> :index="subItem.index" @click="handleSelect(subItem.index, [item.index, subItem.index], subItem)">
{{ subItem.title }} {{ subItem.title }}
</el-menu-item> </el-menu-item>
</el-submenu> </el-submenu>
<el-menu-item v-else :index="item.index" :key="item.index" @click="handleSelect(item.index, [item.index], item)">
<div class="flex">
<SvgIcon1 :iconPath="require(`@/assets/menu/${item.icon}.svg`)" defaultColor="#8A9099"
activeColor="#006AFF" :isActive="item.index == currentMenuItem?.index" />
<span class="title_text" slot="title">{{ item.title }}</span>
</div>
</el-menu-item>
</template>
</div> </div>
</el-menu> </el-menu>
</transition> </transition>
</template> </template>
<script> <script>
@ -38,7 +45,7 @@ import SvgIcon1 from '@/components/SvgIcon1.vue';
import GuipToolTip from '@/components/GuipToolTip.vue'; import GuipToolTip from '@/components/GuipToolTip.vue';
export default { export default {
name: 'SliderMenu', name: 'SliderMenu',
components:{ components: {
SvgIcon1, SvgIcon1,
GuipToolTip GuipToolTip
}, },
@ -53,66 +60,74 @@ export default {
isCollapse: false, isCollapse: false,
activeMenu: '', activeMenu: '',
routerList: [], routerList: [],
// menuData: [ currentMenuItem:'',
// { currentMenuParent:''
// 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' }
// ]
// }
// ]
}; };
}, },
watch: {
"$route.path"() {
this.updateCurrentMenu();
},
},
methods: { methods: {
changeMenuStatus(flag) { changeMenuStatus(flag) {
this.isCollapse = flag; this.isCollapse = flag;
}, },
// handleSelect(index) {
// this.activeMenu = index;
// },
handleOpen(key, keyPath) { handleOpen(key, keyPath) {
console.log(key, keyPath); console.log(key, keyPath);
}, },
handleClose(key, keyPath) { handleClose(key, keyPath) {
console.log(key, keyPath); console.log(key, keyPath);
}, },
handleSelect(index) { // handleSelect(index,indexPath) {
this.activeMenu = index; // this.activeMenu = index;
console.log(index,'---index'); // console.log(index,indexPath, '---index');
// 找到被点击的 menu 项对应的 path // // 找到被点击的 menu 项对应的 path
const allItems = this.menuData.flatMap(menu => menu.children); // const allItems = this.menuData.flatMap(menu => menu.children);
const targetItem = allItems.find(item => item.index === index); // const targetItem = allItems.find(item => item.index === index);
if (targetItem && this.$route.path !== targetItem.path) { // if (targetItem && this.$route.path !== targetItem.path) {
this.$router.push(targetItem.path); // this.$router.push(targetItem.path);
// }
// },
handleSelect(index, indexPath, menuItem) {
if (menuItem.path && this.$route.path !== menuItem.path) {
this.$router.push(menuItem.path);
}
},
updateCurrentMenu() {
const result = this.findMenuItemByPath(this.menuData, this.$route.path);
this.currentMenuItem = result?.item;
console.log(this.currentMenuItem,'currentMenuItem==');
},
findMenuItemByPath(menuItems, targetPath, parent = null) {
for (const item of menuItems) {
if (item.path === targetPath) return { item, parent };
if (item.children?.length) {
const found = this.findMenuItemByPath(item.children, targetPath, item);
if (found) return found;
}
} }
return null;
}, },
handleMenuItemClick(item) { handleMenuItemClick(item) {
this.$router.push(item.path); this.$router.push(item.path);
this.activeMenu = item.index; this.activeMenu = item.index;
} },
}, },
mounted() { mounted() {
const allItems = this.menuData.flatMap(menu => menu.children.map(child => ({ ...child, parentIndex: menu.index }))); // console.log(this.$route.path,'this.$route.path----');
const current = allItems.find(item => item.path === this.$route.path); // const allItems = this.menuData.flatMap(menu =>menu.children ? menu.children?.map(child => ({ ...child, parentIndex: menu.index })) : menu.children);
this.activeMenu = current ? current.index : ''; // console.log(allItems,'=====');
this.defaultOpeneds = current ? [current.parentIndex] : []; // 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;//配置路由 // this.routerList = this.$router.options.router;//配置路由
// console.log(this.$route.path, this.$router.options.router, 'this.$route.path==='); // console.log(this.$route.path, this.$router.options.router, 'this.$route.path===');
// // 初始化时设置默认激活的菜单项 // // 初始化时设置默认激活的菜单项
// this.activeMenu = this.$route.path; // this.activeMenu = this.$route.path;
this.updateCurrentMenu();
} }
} }
</script> </script>
@ -128,51 +143,18 @@ export default {
transform: translateX(-30px); transform: translateX(-30px);
} }
.el-menu--vertical{ .el-menu--vertical {
.el-menu-item{ .el-menu-item {
height: 40px; height: 40px;
line-height: 40px; line-height: 40px;
} }
.el-menu-item.is-active{
.el-menu-item.is-active {
font-weight: bold; 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 { .title_img {
width: 16px; width: 16px;
margin-right: 4px; margin-right: 4px;
@ -185,10 +167,12 @@ export default {
display: block; display: block;
} }
.el-menu--collapse .title_text{
.el-menu--collapse .title_text {
display: none; display: none;
} }
.el-menu--collapse ::v-deep .el-submenu__icon-arrow{
.el-menu--collapse ::v-deep .el-submenu__icon-arrow {
display: none; display: none;
} }
@ -221,7 +205,8 @@ export default {
letter-spacing: 0.08em; letter-spacing: 0.08em;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
img{
img {
width: 14px; width: 14px;
height: 14px; height: 14px;
@ -278,6 +263,7 @@ export default {
color: #006AFF; color: #006AFF;
font-weight: bold; font-weight: bold;
} }
// .el-submenu .el-menu { // .el-submenu .el-menu {
// transition: all 0.3s ease; // transition: all 0.3s ease;
// } // }
@ -294,5 +280,4 @@ export default {
// .el-menu--collapse .el-submenu.is-opened > .el-menu { // .el-menu--collapse .el-submenu.is-opened > .el-menu {
// opacity: 0; // opacity: 0;
// height: 0; // height: 0;
// } // }</style>
</style>

8
src/store/index.js
View File

@ -100,14 +100,6 @@ export default new Vuex.Store({
path:'/', path:'/',
icon: 'Totalprofit', icon: 'Totalprofit',
}, },
// {
// name: '用户管理',
// icon: 'el-icon-user',
// children: [
// { name: '用户列表', path: '/user/list' },
// { name: '角色管理', path: '/user/role' }
// ]
// },
{ {
index: '2', index: '2',
title: '父级菜单1', title: '父级菜单1',

2
src/style/theme/index.css
View File

@ -5022,6 +5022,8 @@ border-color:#006AFF !important;
height: 56px; height: 56px;
line-height: 56px; line-height: 56px;
font-size: 14px; font-size: 14px;
display: flex;
align-items: center;
color: #1e2226; color: #1e2226;
padding: 0 20px; padding: 0 20px;
list-style: none; list-style: none;

Write Preview
Loading…
Cancel
Save