Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Appearance settings

Commit 4f7a152

Browse filesBrowse files
midfarmidfar
authored
Merge pull request #2 from midfar/demo/left-menu
新增配置项：左侧菜单子目录气泡显示
2 parents 1048790 + 2d933ee commit 4f7a152
Copy full SHA for 4f7a152

File tree

Expand file treeCollapse file tree

7 files changed

+62
-12
lines changed
Filter options
Expand file treeCollapse file tree

7 files changed

+62
-12
lines changed

‎src/layout/components/Settings/index.vue

Copy file name to clipboardExpand all lines: src/layout/components/Settings/index.vue
+16Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,11 @@
2323
<el-switch v-model="sidebarLogo" class="drawer-switch" />
2424
</div>
2525

26+
<div class="drawer-item">
27+
<span>左侧菜单子目录气泡显示</span>
28+
<el-switch v-model="secondMenuPopup" class="drawer-switch" />
29+
</div>
30+
2631
</div>
2732
</div>
2833
</template>
@@ -72,6 +77,17 @@ export default defineComponent({
7277
value: val
7378
});
7479
}
80+
},
81+
secondMenuPopup: {
82+
get() {
83+
return store.settings().secondMenuPopup;
84+
},
85+
set(val) {
86+
store.settings().changeSetting({
87+
key: 'secondMenuPopup',
88+
value: val
89+
});
90+
}
7591
}
7692
},
7793
methods: {

‎src/layout/components/Sidebar/SidebarItem.vue

Copy file name to clipboardExpand all lines: src/layout/components/Sidebar/SidebarItem.vue
+15-3Lines changed: 15 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -8,8 +8,10 @@
88

99
<!-- <item :icon="onlyOneChild.meta.icon || (item.meta && item.meta.icon)" :title="onlyOneChild.meta.title" /> -->
1010
<template v-if="get2MetaIconPath(onlyOneChild, item)">
11-
<svg-icon v-if="typeof get2MetaIconPath(onlyOneChild, item) === 'string'"
12-
:icon-class="get2MetaIconPath(onlyOneChild, item)" />
11+
<template v-if="typeof get2MetaIconPath(onlyOneChild, item) === 'string'">
12+
<svg-icon :icon-class="get2MetaIconPath(onlyOneChild, item)" />
13+
<span v-if="secondMenuPopup && isTopRoute" class="text text-one text-one-added">{{ onlyOneChild.meta.title }}</span>
14+
</template>
1315
<component v-else :is="get2MetaIconPath(onlyOneChild, item)" class="svg-icon el-svg-icon" />
1416
</template>
1517
<template #title>
@@ -26,7 +28,7 @@
2628
<svg-icon v-if="typeof getMetaIconPath(item) === 'string'" :icon-class="getMetaIconPath(item)" />
2729
<component v-else :is="getMetaIconPath(item)" class="svg-icon el-svg-icon" />
2830
</template>
29-
<svg-icon v-else icon-class="sub-el-icon" />
31+
<!-- <svg-icon v-else icon-class="list" /> -->
3032
<span class="text text-two">{{ item.meta.title }}</span>
3133
</template>
3234
<sidebar-item v-for="child in item.children" :key="child.path" :is-nest="true" :item="child"
@@ -42,6 +44,8 @@ import { isExternal } from '@/utils/validate';
4244
// import Item from './Item';
4345
import AppLink from './Link';
4446
import FixiOSBug from './FixiOSBug';
47+
import { mapState } from 'pinia';
48+
import store from '@/store';
4549
4650
export default defineComponent({
4751
name: 'SidebarItem',
@@ -63,6 +67,10 @@ export default defineComponent({
6367
basePath: {
6468
type: String,
6569
default: ''
70+
},
71+
isTopRoute: { // 是否为顶层路由
72+
type: Boolean,
73+
default: false
6674
}
6775
},
6876
data() {
@@ -72,6 +80,9 @@ export default defineComponent({
7280
return {};
7381
},
7482
computed: {
83+
...mapState(store.settings, {
84+
secondMenuPopup: 'secondMenuPopup'
85+
}),
7586
isItemHidden() {
7687
if (this.item.meta && this.item.meta.hidden) {
7788
return true;
@@ -125,6 +136,7 @@ export default defineComponent({
125136

126137
<style lang="scss" scoped>
127138
.link :deep(.el-menu-tooltip__trigger) {
139+
position: relative;
128140
padding: 0;
129141
}
130142

‎src/layout/components/Sidebar/index.vue

Copy file name to clipboardExpand all lines: src/layout/components/Sidebar/index.vue
+7-1Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
<el-menu class="left-menu" :default-active="activeMenu" :collapse="isCollapse"
66
:background-color="variables.menuBg" :text-color="variables.menuText" :unique-opened="false"
77
:active-text-color="variables.menuActiveText" :collapse-transition="false" mode="vertical">
8-
<sidebar-item v-for="route in permission_routes" :key="route.path" :item="route" :base-path="route.path" />
8+
<sidebar-item v-for="route in permission_routes" :key="route.path" :item="route" :base-path="route.path" :is-top-route="true" />
99
</el-menu>
1010
</el-scrollbar>
1111
</div>
@@ -39,6 +39,9 @@ export default defineComponent({
3939
...mapState(store.permission, {
4040
permission_routes: 'routes'
4141
}),
42+
...mapState(store.settings, {
43+
secondMenuPopup: 'secondMenuPopup'
44+
}),
4245
activeMenu() {
4346
const route = this.$route;
4447
const { meta, path } = route;
@@ -52,6 +55,9 @@ export default defineComponent({
5255
return store.settings().sidebarLogo;
5356
},
5457
isCollapse() {
58+
if (this.secondMenuPopup) {
59+
return true;
60+
}
5561
return !this.sidebar.opened;
5662
}
5763
}

‎src/settings.ts

Copy file name to clipboardExpand all lines: src/settings.ts
+7Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ interface ISettings {
44
tagsView: boolean;
55
fixedHeader: boolean;
66
sidebarLogo: boolean;
7+
secondMenuPopup: boolean;
78
errorLog: string | string[];
89
}
910

@@ -34,6 +35,12 @@ const settings:ISettings = {
3435
*/
3536
sidebarLogo: false,
3637

38+
/**
39+
* @type {boolean} true | false
40+
* @description 左侧菜单子目录气泡显示
41+
*/
42+
secondMenuPopup: false,
43+
3744
/**
3845
* @type {string | array} 'production' | ['production', 'development']
3946
* @description Need show err logs component.

‎src/store/modules/settings.ts

Copy file name to clipboardExpand all lines: src/store/modules/settings.ts
+3-2Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { defineStore } from 'pinia';
22
import defaultSettings from '@/settings';
33

4-
const { showSettings, tagsView, fixedHeader, sidebarLogo } = defaultSettings;
4+
const { showSettings, tagsView, fixedHeader, sidebarLogo, secondMenuPopup } = defaultSettings;
55

66
export default defineStore({
77
id: 'settings',
@@ -10,7 +10,8 @@ export default defineStore({
1010
showSettings: showSettings,
1111
tagsView: tagsView,
1212
fixedHeader: fixedHeader,
13-
sidebarLogo: sidebarLogo
13+
sidebarLogo: sidebarLogo,
14+
secondMenuPopup: secondMenuPopup
1415
}),
1516
getters: {},
1617
actions: {

‎src/styles/sidebar.scss

Copy file name to clipboardExpand all lines: src/styles/sidebar.scss
+8Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -59,6 +59,7 @@
5959
}
6060

6161
.svg-icon {
62+
flex-shrink: 0;
6263
margin-right: 16px;
6364
}
6465

@@ -108,6 +109,9 @@
108109
.submenu-title-noDropdown {
109110
padding: 0 !important;
110111
position: relative;
112+
.text-one-added {
113+
display: none;
114+
}
111115

112116
.el-tooltip {
113117
padding: 0 !important;
@@ -205,6 +209,10 @@
205209

206210
.nest-menu .el-sub-menu>.el-sub-menu__title,
207211
.el-menu-item {
212+
.text {
213+
overflow: hidden;
214+
text-overflow: ellipsis;
215+
}
208216
&:hover {
209217
// you can use var(--sub-menu-hover)
210218
background-color: var(--menu-hover) !important;

‎src/views/dashboard/admin/components/RaddarChart.vue

Copy file name to clipboardExpand all lines: src/views/dashboard/admin/components/RaddarChart.vue
+6-6Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -69,12 +69,12 @@ export default defineComponent({
6969
}
7070
},
7171
indicator: [
72-
{ name: 'Sales', max: 10000 },
73-
{ name: 'Administration', max: 20000 },
74-
{ name: 'Information Technology', max: 20000 },
75-
{ name: 'Customer Support', max: 20000 },
76-
{ name: 'Development', max: 20000 },
77-
{ name: 'Marketing', max: 20000 }
72+
{ name: 'Sales' },
73+
{ name: 'Administration' },
74+
{ name: 'Information Technology' },
75+
{ name: 'Customer Support' },
76+
{ name: 'Development' },
77+
{ name: 'Marketing' }
7878
]
7979
},
8080
legend: {

0 commit comments

Comments
0 (0)
Morty Proxy This is a proxified and sanitized view of the page, visit original site.