suojin
/
jonhon-mes-web
15
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

菜单搜索

Browse Source
menu_style
zhangdi 3 months ago
parent b0d68803c8
commit 9d06607ebb
1 changed files with 153 additions and 117 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. 270
      src/page/index/sidebar/index.vue

270
src/page/index/sidebar/index.vue
Unescape View File

@ -1,7 +1,9 @@
<template> <template>
<el-menu unique-opened :default-active="activeMenu" :mode="setting.sidebar" :collapse="isCollapse" <el-menu unique-opened :default-active="activeMenu" :mode="setting.sidebar" :collapse="isCollapse"
v-if="setting.styleRadio == '1'"> v-if="setting.styleRadio == '1'">
<sidebar-item :menu="menu"></sidebar-item> <el-input v-model="input1" class="w-50 m-2" size="large" placeholder="请输入" suffix-icon="Search"
style="width:90%;margin-left:5%;" clearable />
<sidebar-item :menu="filteredMenu"></sidebar-item>
</el-menu> </el-menu>
<el-menu unique-opened :default-active="activeMenu" :mode="setting.sidebar" :collapse="isCollapse" <el-menu unique-opened :default-active="activeMenu" :mode="setting.sidebar" :collapse="isCollapse"
@ -11,28 +13,30 @@
<left-menu :menulist="menu" v-if="setting.styleRadio == '2'"></left-menu> <left-menu :menulist="menu" v-if="setting.styleRadio == '2'"></left-menu>
<leftMenuSec :menulist="menu" v-if="setting.styleRadio == '5'"></leftMenuSec> <leftMenuSec :menulist="menu" v-if="setting.styleRadio == '5'"></leftMenuSec>
<div class="left_menu_box" :class="leftMenu[selectIndex].children ? 'right_box' : ''" style="display: flex;height: 100%;background: #fff;" <div class="left_menu_box" :class="leftMenu[selectIndex].children ? 'right_box' : ''"
v-if="setting.styleRadio == '3'"> style="display: flex;height: 100%;background: #fff;" v-if="setting.styleRadio == '3'">
<div :class="leftMenu.find(item => item.children) ? 'children' : 'no_child'"> <div :class="leftMenu.find(item => item.children) ? 'children' : 'no_child'">
<!-- <div class="top_title">{{ this.menu.find(item => item.id == this.leftMenu[selectIndex].parentId).name }}</div> --> <!-- <div class="top_title">{{ this.menu.find(item => item.id == this.leftMenu[selectIndex].parentId).name }}</div> -->
<div class="left_menu" @click="clickItem(item, index)" v-for="(item, index) in leftMenu" :key="item.id" @mouseenter="mouseEnter(item,index)" <div class="left_menu" @click="clickItem(item, index)" v-for="(item, index) in leftMenu" :key="item.id"
:class="index == selectIndex ? 'active' : ''"> @mouseenter="mouseEnter(item, index)" :class="index == selectIndex ? 'active' : ''">
<div class="left_menu_item"> <div class="left_menu_item">
<i :class="item.source" ></i> <i :class="item.source"></i>
<span class="name_text">{{ item.name.substring(0,4) }}</span> <span class="name_text">{{ item.name.substring(0, 4) }}</span>
</div> </div>
</div> </div>
</div> </div>
<div style="flex: 1;height: 100%;background: #fff;" v-show="leftMenu[selectIndex].children" @mouseleave="mouseleave(leftMenu[selectIndex])"> <div style="flex: 1;height: 100%;background: #fff;" v-show="leftMenu[selectIndex].children"
@mouseleave="mouseleave(leftMenu[selectIndex])">
<div <div
v-if="leftMenu && leftMenu.length != 0 && leftMenu[selectIndex].children && leftMenu[selectIndex].children.length != 0"> v-if="leftMenu && leftMenu.length != 0 && leftMenu[selectIndex].children && leftMenu[selectIndex].children.length != 0">
<div class="left_top">{{ leftMenu[selectIndex].name }} </div> <div class="left_top">{{ leftMenu[selectIndex].name }} </div>
<div class="right_menu" v-for="item in leftMenu[selectIndex].children" :key="item.id" @mouseenter="mounseEnter(item)" @mouseleave="mounseLeave(leftMenu[selectIndex],item)"> <div class="right_menu" v-for="item in leftMenu[selectIndex].children" :key="item.id"
@mouseenter="mounseEnter(item)" @mouseleave="mounseLeave(leftMenu[selectIndex], item)">
<div class="right_menu_item"> <div class="right_menu_item">
<el-popover placement="right-start" :show-arrow="false" :offset="0" :hide-after='0' <el-popover placement="right-start" :show-arrow="false" :offset="0" :hide-after='0'
popper-class="log-popover" popper-class="log-popover"
popper-style="visibility: visible;width:auto;border:none; transform-origin: left center; z-index: 2051;padding:0;offset:0 !important;" popper-style="visibility: visible;width:auto;border:none; transform-origin: left center; z-index: 2051;padding:0;offset:0 !important;"
@hide="hidePopover(leftMenu[selectIndex],item)"> @hide="hidePopover(leftMenu[selectIndex], item)">
<template #reference> <template #reference>
<div class="right_menu_item_box" @click='clickPage(item)'> <div class="right_menu_item_box" @click='clickPage(item)'>
<div>{{ item.name }}</div> <div>{{ item.name }}</div>
@ -41,17 +45,21 @@
</el-icon> </el-icon>
</div> </div>
</template> </template>
<template #default > <template #default>
<div class="third_box" v-if="item.children && item.children.length != 0 && !item.children.find(item1 => item1.children)"> <div class="third_box"
<div class="third_box_item" v-for="third in item.children" :key="third.id" @click="handleClick(third)"> v-if="item.children && item.children.length != 0 && !item.children.find(item1 => item1.children)">
<div class="third_box_item" v-for="third in item.children" :key="third.id"
@click="handleClick(third)">
{{ third.name }} {{ third.name }}
</div> </div>
</div> </div>
<div class="four_box" v-if="item.children && item.children.length != 0 && item.children.find(item1 => item1.children)"> <div class="four_box"
v-if="item.children && item.children.length != 0 && item.children.find(item1 => item1.children)">
<div class="four_box_item" v-for="third in item.children" :key="third.id"> <div class="four_box_item" v-for="third in item.children" :key="third.id">
<div class="third_name" @click="handleClick(third)"><span></span>{{ third.name }}</div> <div class="third_name" @click="handleClick(third)"><span></span>{{ third.name }}</div>
<div class="four_con_box" v-if="third.children"> <div class="four_con_box" v-if="third.children">
<div class="four_con_item" v-for="four in third.children" :key="four.id" @click="handleClick(four)"> <div class="four_con_item" v-for="four in third.children" :key="four.id"
@click="handleClick(four)">
{{ four.name }} {{ four.name }}
</div> </div>
</div> </div>
@ -66,21 +74,22 @@
</div> </div>
<div v-if="setting.styleRadio == '6'" class="left_menu_box six"> <div v-if="setting.styleRadio == '6'" class="left_menu_box six">
<div class="left_menu six_menu"> <div class="left_menu six_menu">
<div class="left_menu_item" v-for="(item,index) in menu" :key="item.id" @click="clickMenu(item,index)" :class="activeIndex == index ? 'hover' : ''"> <div class="left_menu_item" v-for="(item, index) in menu" :key="item.id" @click="clickMenu(item, index)"
:class="activeIndex == index ? 'hover' : ''">
<i :class="item.source" style="font-size: 20px;"></i> <i :class="item.source" style="font-size: 20px;"></i>
<span class="name_text">{{ item.name.substring(0,2) }}</span> <span class="name_text">{{ item.name.substring(0, 2) }}</span>
</div> </div>
</div> </div>
<div style="flex: 1;height: 100%;" v-show="menu[activeIndex].children" @mouseleave="mouseleave(menu[activeIndex])"> <div style="flex: 1;height: 100%;" v-show="menu[activeIndex].children" @mouseleave="mouseleave(menu[activeIndex])">
<div <div v-if="menu && menu.length != 0 && menu[activeIndex].children && menu[activeIndex].children.length != 0">
v-if="menu && menu.length != 0 && menu[activeIndex].children && menu[activeIndex].children.length != 0">
<div class="left_top">{{ menu[activeIndex].name }} </div> <div class="left_top">{{ menu[activeIndex].name }} </div>
<div class="right_menu" v-for="item in menu[activeIndex].children" :key="item.id" @mouseenter="mounseEnter(item)" @mouseleave="mounseLeave(menu[activeIndex],item)"> <div class="right_menu" v-for="item in menu[activeIndex].children" :key="item.id"
@mouseenter="mounseEnter(item)" @mouseleave="mounseLeave(menu[activeIndex], item)">
<div class="right_menu_item"> <div class="right_menu_item">
<el-popover placement="right-start" :show-arrow="false" :offset="0" :hide-after='0' <el-popover placement="right-start" :show-arrow="false" :offset="0" :hide-after='0'
popper-class="log-popover" popper-class="log-popover"
popper-style="visibility: visible;width:auto;border:none; transform-origin: left center; z-index: 2051;padding:0;offset:0 !important;" popper-style="visibility: visible;width:auto;border:none; transform-origin: left center; z-index: 2051;padding:0;offset:0 !important;"
@hide="hidePopover(menu[activeIndex],item)"> @hide="hidePopover(menu[activeIndex], item)">
<template #reference> <template #reference>
<div class="right_menu_item_box" @click='clickPage(item)'> <div class="right_menu_item_box" @click='clickPage(item)'>
<div class="second_name">{{ item.name }}</div> <div class="second_name">{{ item.name }}</div>
@ -89,17 +98,21 @@
</el-icon> </el-icon>
</div> </div>
</template> </template>
<template #default > <template #default>
<div class="third_box" v-if="item.children && item.children.length != 0 && !item.children.find(item1 => item1.children)"> <div class="third_box"
<div class="third_box_item" v-for="third in item.children" :key="third.id" @click="handleClick(third)"> v-if="item.children && item.children.length != 0 && !item.children.find(item1 => item1.children)">
<div class="third_box_item" v-for="third in item.children" :key="third.id"
@click="handleClick(third)">
{{ third.name }} {{ third.name }}
</div> </div>
</div> </div>
<div class="four_box" v-if="item.children && item.children.length != 0 && item.children.find(item1 => item1.children)"> <div class="four_box"
v-if="item.children && item.children.length != 0 && item.children.find(item1 => item1.children)">
<div class="four_box_item" v-for="third in item.children" :key="third.id"> <div class="four_box_item" v-for="third in item.children" :key="third.id">
<div class="third_name" @click="handleClick(third)"><span></span>{{ third.name }}</div> <div class="third_name" @click="handleClick(third)"><span></span>{{ third.name }}</div>
<div class="four_con_box" v-if="third.children"> <div class="four_con_box" v-if="third.children">
<div class="four_con_item" v-for="four in third.children" :key="four.id" @click="handleClick(four)"> <div class="four_con_item" v-for="four in third.children" :key="four.id"
@click="handleClick(four)">
{{ four.name }} {{ four.name }}
</div> </div>
</div> </div>
@ -123,12 +136,13 @@ import leftMenuSec from './leftMenu_sec.vue'
export default { export default {
name: 'sidebar', name: 'sidebar',
components: { sidebarItem, leftMenu,leftMenuSec }, components: { sidebarItem, leftMenu, leftMenuSec },
data() { data() {
return { return {
isCollapse: false, isCollapse: false,
showRight:false, showRight: false,
activeIndex:0, activeIndex: 0,
input1: '',
// selectIndex:0 // selectIndex:0
} }
}, },
@ -143,19 +157,41 @@ export default {
} }
return path; return path;
}, },
filteredMenu(){
return this.input1 ? this.searchMenu(this.menu, this.input1) : this.menu; // 如果搜索文本为空，则返回原始数据；否则返回过滤后的数据。
},
}, },
mounted() { mounted() {
console.log('left--------------------------',this.leftMenu)
console.log('menu--------------------------',this.menu) console.log('menu--------------------------', this.menu)
console.log('selectIndex--------------------------',this.selectIndex) console.log('selectIndex--------------------------', this.selectIndex)
if(this.setting.styleRadio=='3'){ if (this.setting.styleRadio == '3') {
this.index.openMenu2(); this.index.openMenu2();
}else{ } else {
this.index.openMenu2(); this.index.openMenu2();
} }
}, },
methods: { methods: {
clickMenu(item,index){ menuInput(value) {
console.log(999, value)
console.log('menu--------------------------', this.searchMenu(this.menu, value), this.menu)
this.menu = this.searchMenu(this.menu, value)
},
searchMenu(items, searchText) {
const result = [];
items.forEach(item => {
if (item.name.includes(searchText)) {
result.push(item); // 直接匹配的项加入结果数组
} else if (item.children && item.children.length > 0) { // 递归查找子菜单项
const childrenResult = this.searchMenu(item.children, searchText); // 递归调用
if (childrenResult.length > 0) { // 如果子菜单中有匹配项，则合并到结果数组中
result.push({ ...item, children: childrenResult }); // 保留父节点并加入匹配的子节点
}
}
});
return result;
},
clickMenu(item, index) {
this.activeIndex = index this.activeIndex = index
}, },
clickItem(item, index) { clickItem(item, index) {
@ -178,57 +214,57 @@ export default {
this.$store.commit('SET_SELECTED_INDEX', item.parentId + ''); this.$store.commit('SET_SELECTED_INDEX', item.parentId + '');
} }
}, },
mouseEnter(item,index){ mouseEnter(item, index) {
this.$store.commit('SET_SELECT_INDEX', index); this.$store.commit('SET_SELECT_INDEX', index);
if(item.children){ if (item.children) {
this.showRight = true this.showRight = true
}else{ } else {
this.showRight = false this.showRight = false
} }
}, },
hidePopover(item,item1){ hidePopover(item, item1) {
console.log('33333333333333333333333',item1) console.log('33333333333333333333333', item1)
if(item1.children){ if (item1.children) {
if(item.id != this.selectedIndex){ if (item.id != this.selectedIndex) {
let tmp = this.leftMenu.find(item => item.id == this.selectedIndex) let tmp = this.leftMenu.find(item => item.id == this.selectedIndex)
let tmpIndex = this.leftMenu.findIndex(item => item.id == this.selectedIndex) let tmpIndex = this.leftMenu.findIndex(item => item.id == this.selectedIndex)
this.$store.commit('SET_SELECT_INDEX', tmpIndex == -1 ? 0 : tmpIndex); this.$store.commit('SET_SELECT_INDEX', tmpIndex == -1 ? 0 : tmpIndex);
} }
} }
}, },
mouseleave(item){ mouseleave(item) {
console.log('item-------------------',item) console.log('item-------------------', item)
if(item.children.find(item1 => item1.children)){ if (item.children.find(item1 => item1.children)) {
console.log('111111111111111111') console.log('111111111111111111')
}else{ } else {
if(item.id != this.selectedIndex){ if (item.id != this.selectedIndex) {
let tmp = this.leftMenu.find(item => item.id == this.selectedIndex) let tmp = this.leftMenu.find(item => item.id == this.selectedIndex)
let tmpIndex = this.leftMenu.findIndex(item => item.id == this.selectedIndex) let tmpIndex = this.leftMenu.findIndex(item => item.id == this.selectedIndex)
this.$store.commit('SET_SELECT_INDEX', tmpIndex == -1 ? 0 : tmpIndex); this.$store.commit('SET_SELECT_INDEX', tmpIndex == -1 ? 0 : tmpIndex);
} }
} }
}, },
mounseLeave(item,item1){ mounseLeave(item, item1) {
console.log('222222222222222222222222222') console.log('222222222222222222222222222')
// console.log('item----------------------',item) // console.log('item----------------------',item)
// console.log('item1----------------------',item1) // console.log('item1----------------------',item1)
// console.log('tmp-------------------',item.children.find(item1 => item1.children)) // console.log('tmp-------------------',item.children.find(item1 => item1.children))
// if(!item1.children){ // if(!item1.children){
// if(item.id != this.selectedIndex){ // if(item.id != this.selectedIndex){
// let tmp = this.leftMenu.find(item => item.id == this.selectedIndex) // let tmp = this.leftMenu.find(item => item.id == this.selectedIndex)
// let tmpIndex = this.leftMenu.findIndex(item => item.id == this.selectedIndex) // let tmpIndex = this.leftMenu.findIndex(item => item.id == this.selectedIndex)
// this.$store.commit('SET_SELECT_INDEX', tmpIndex == -1 ? 0 : tmpIndex); // this.$store.commit('SET_SELECT_INDEX', tmpIndex == -1 ? 0 : tmpIndex);
// } // }
// } // }
}, },
mounseEnter(item){ mounseEnter(item) {
console.log('item0000000000000000000000000',item) console.log('item0000000000000000000000000', item)
this.showRight = true this.showRight = true
}, },
handleClick(item){ handleClick(item) {
console.log('item000000000000000000000000',item) console.log('item000000000000000000000000', item)
if(!item.children){ if (!item.children) {
this.$router.push({ this.$router.push({
path: item.path, path: item.path,
query: item.query, query: item.query,
@ -237,30 +273,29 @@ export default {
} }
}, },
}; };
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.left_menu_box_six{ .left_menu_box_six {}
}
.left_menu_box{ .left_menu_box {
width: 70px !important; width: 70px !important;
&.right_box{ &.right_box {
width: 200px !important; width: 200px !important;
background: #fff; background: #fff;
} }
&.six{ &.six {
width: 215px !important; width: 215px !important;
background: #f7fafc !important; background: #f7fafc !important;
display: flex; display: flex;
height: 100%; height: 100%;
} }
} }
.no_child { .no_child {
width: 70px; width: 70px;
} }
@ -269,21 +304,22 @@ export default {
width: 70px; width: 70px;
height: 100%; height: 100%;
&:hover{ &:hover {
transition: all .5s; transition: all .5s;
box-shadow: 5px 5px 30px #afaeae; box-shadow: 5px 5px 30px #afaeae;
} }
} }
.top_title{
.top_title {
font-size: 14px; font-size: 14px;
font-family: Microsoft YaHei-Bold, Microsoft YaHei; font-family: Microsoft YaHei-Bold, Microsoft YaHei;
font-weight: 700; font-weight: 700;
text-align: center; text-align: center;
height: 48px; height: 48px;
display: flex; display: flex;
color: #5a6f82; color: #5a6f82;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
} }
.left_menu { .left_menu {
@ -301,7 +337,7 @@ export default {
color: #fff; color: #fff;
} }
&.six_menu{ &.six_menu {
display: flex; display: flex;
height: 100%; height: 100%;
flex-direction: column; flex-direction: column;
@ -309,12 +345,12 @@ export default {
width: 60px; width: 60px;
color: #0066ff; color: #0066ff;
&:hover{ &:hover {
transition: all .5s; transition: all .5s;
box-shadow: 5px 5px 30px #afaeae; box-shadow: 5px 5px 30px #afaeae;
} }
} }
.left_menu_item { .left_menu_item {
cursor: pointer; cursor: pointer;
@ -334,13 +370,13 @@ export default {
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
.img_box{ .img_box {
width: 14px; width: 14px;
height: 14px; height: 14px;
background: url('@/assets/right_pull.png'); background: url('@/assets/right_pull.png');
} }
.name_text{ .name_text {
font-size: 12px; font-size: 12px;
font-family: Microsoft YaHei-Regular, Microsoft YaHei; font-family: Microsoft YaHei-Regular, Microsoft YaHei;
font-weight: 500; font-weight: 500;
@ -358,20 +394,20 @@ export default {
background: #0066ff; background: #0066ff;
color: #fff; color: #fff;
.img_box{ .img_box {
width: 14px; width: 14px;
height: 14px; height: 14px;
background: url('@/assets/right_pull_white.png'); background: url('@/assets/right_pull_white.png');
} }
} }
&:hover { &:hover {
background: #0066ff; background: #0066ff;
color: #fff; color: #fff;
.img_box{ .img_box {
width: 14px; width: 14px;
height: 14px; height: 14px;
background: url('@/assets/right_pull_white.png'); background: url('@/assets/right_pull_white.png');
@ -384,14 +420,14 @@ export default {
.left_top { .left_top {
font-size: 14px; font-size: 14px;
font-family: Microsoft YaHei-Bold, Microsoft YaHei; font-family: Microsoft YaHei-Bold, Microsoft YaHei;
font-weight: 700; font-weight: 700;
text-align: center; text-align: center;
height: 48px; height: 48px;
display: flex; display: flex;
color: #5a6f82; color: #5a6f82;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
} }
.right_menu { .right_menu {
@ -428,7 +464,7 @@ export default {
align-items: center; align-items: center;
color: #333; color: #333;
.second_name{ .second_name {
width: 100%; width: 100%;
height: 46px; height: 46px;
font-size: 14px; font-size: 14px;
@ -452,7 +488,6 @@ export default {
} }
} }
</style> </style>
<style lang="scss"> <style lang="scss">
.third_box { .third_box {
@ -479,7 +514,7 @@ export default {
white-space: nowrap; white-space: nowrap;
box-sizing: border-box; box-sizing: border-box;
&:hover{ &:hover {
background: #0066ff; background: #0066ff;
color: #fff; color: #fff;
} }
@ -490,10 +525,10 @@ export default {
border: none; border: none;
} }
.four_box{ .four_box {
display: flex; display: flex;
.four_box_item{ .four_box_item {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
// line-height: 46px; // line-height: 46px;
@ -501,37 +536,38 @@ export default {
padding-left: 15px; padding-left: 15px;
padding-top: 15px; padding-top: 15px;
cursor: pointer; cursor: pointer;
.third_name{ .third_name {
line-height: 46px; line-height: 46px;
display: flex; display: flex;
align-items: center; align-items: center;
span{ span {
width: 3px; width: 3px;
height: 15px; height: 15px;
margin-right: 5px; margin-right: 5px;
display: inline-block; display: inline-block;
background:#0066ff ; background: #0066ff;
} }
} }
.four_con_box{
display: flex;
flex-direction: column;
.four_con_item{
line-height: 46px;
padding-left: 10px;
&:hover{
background: #0066ff;
color: #fff;
}
.four_con_box {
display: flex;
flex-direction: column;
.four_con_item {
line-height: 46px;
padding-left: 10px;
&:hover {
background: #0066ff;
color: #fff;
} }
} }
}
} }
} }
</style> </style>

Write Preview
Loading…
Cancel
Save