Skip to content

Commit d0b5aca

Browse files
icssoaicssoa
committed
优化菜单收起展开状态
1 parent 0d25d29 commit d0b5aca

File tree

6 files changed

+31
-113
lines changed

6 files changed

+31
-113
lines changed

‎package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "cool-admin-vue",
3-
"version": "3.1.5",
3+
"version": "3.1.6",
44
"scripts": {
55
"serve": "vue-cli-service serve",
66
"build": "vue-cli-service build",

‎src/cool/modules/base/components/menu/topbar.vue

Lines changed: 6 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
@select="onSelect"
88
>
99
<el-menu-item v-for="(item, index) in list" :index="`${index}`" :key="index">
10-
<icon-svg v-if="item.icon" :name="item.icon"></icon-svg>
10+
<icon-svg v-if="item.icon" :name="item.icon" :size="18"></icon-svg>
1111
<span>{{ item.name }}</span>
1212
</el-menu-item>
1313
</el-menu>
@@ -76,19 +76,21 @@ export default {
7676

7777
<style lang="scss" scoped>
7878
.cl-menu-topbar {
79+
margin-right: 10px;
80+
7981
/deep/.el-menu {
8082
height: 50px;
8183
background: transparent;
8284
border-bottom: 0;
8385
overflow: hidden;
8486
8587
.el-menu-item {
86-
height: 50px;
8788
display: flex;
8889
align-items: center;
89-
background: transparent;
90+
height: 50px;
9091
border-bottom: 0;
91-
padding: 0 30px;
92+
padding: 0 20px;
93+
background: transparent;
9294
9395
span {
9496
font-size: 12px;
@@ -97,13 +99,10 @@ export default {
9799
}
98100
99101
&.is-active {
100-
background: rgba(255, 255, 255, 0.13);
101102
color: $color-primary;
102103
}
103104
104105
/deep/.icon-svg {
105-
height: 18px;
106-
width: 18px;
107106
margin-right: 5px;
108107
}
109108
}

‎src/cool/modules/base/components/route-nav/index.vue

Lines changed: 2 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -82,19 +82,16 @@ export default {
8282
white-space: nowrap;
8383
8484
/deep/.el-breadcrumb {
85-
margin: 0 10px;
86-
8785
&__inner {
88-
font-size: 12px;
86+
font-size: 13px;
8987
padding: 0 10px;
9088
font-weight: normal;
9189
letter-spacing: 1px;
9290
}
9391
}
9492
9593
.title {
96-
display: none;
97-
font-size: 15px;
94+
font-size: 14px;
9895
font-weight: 500;
9996
margin-left: 5px;
10097
}

‎src/cool/modules/demo/views/demo.vue

Lines changed: 13 additions & 96 deletions
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,18 @@
11
<template>
22
<el-scrollbar>
33
<div class="demo">
4-
<div class="list">
5-
<div
6-
class="item"
7-
:style="{
8-
width: `calc(${100 / cols}% - 10px)`
9-
}"
10-
:ref="`col-${index + 1}`"
11-
v-for="(item, index) in layout"
4+
<el-row :gutter="10">
5+
<el-col
6+
v-for="(item, index) in list"
127
:key="index"
8+
:xs="24"
9+
:sm="12"
10+
:md="8"
11+
:lg="6"
1312
>
14-
<transition-group name="fade">
15-
<component
16-
:ref="item2"
17-
:is="item2"
18-
:key="item2 + index2"
19-
v-for="(item2, index2) in item"
20-
></component>
21-
</transition-group>
22-
</div>
23-
</div>
13+
<component :is="item"></component>
14+
</el-col>
15+
</el-row>
2416
</div>
2517
</el-scrollbar>
2618
</template>
@@ -58,93 +50,16 @@ export default {
5850
"b-cl-context-menu",
5951
"b-error-page",
6052
"b-cl-editor-quill"
61-
],
62-
cols: 4,
63-
layout: [[], [], [], []]
53+
]
6454
};
65-
},
66-
67-
mounted() {
68-
const width = document.body.clientWidth;
69-
70-
if (width < 768) {
71-
this.cols = 1;
72-
} else if (width < 1000) {
73-
this.cols = 2;
74-
} else if (width < 1500) {
75-
this.cols = 3;
76-
} else {
77-
this.cols = 4;
78-
}
79-
80-
this.append();
81-
},
82-
83-
methods: {
84-
getHeight(name) {
85-
return this.$refs[name][0].offsetHeight;
86-
},
87-
88-
selectCol() {
89-
let arr = new Array(this.cols).fill(1);
90-
91-
for (let i = 0; i < this.cols; i++) {
92-
arr[i] = this.getHeight(`col-${i + 1}`);
93-
}
94-
95-
let min = Math.min.apply(this, arr);
96-
97-
return arr.indexOf(min);
98-
},
99-
100-
append(index = 0) {
101-
const i = this.selectCol();
102-
const item = this.list[index];
103-
104-
if (!item) {
105-
return false;
106-
}
107-
108-
this.layout[i].push(item);
109-
110-
this.$nextTick(() => {
111-
setTimeout(() => {
112-
this.append(index + 1);
113-
}, 100);
114-
});
115-
}
11655
}
11756
};
11857
</script>
11958

12059
<style lang="scss">
121-
.fade-enter-active,
122-
.fade-leave-active {
123-
transition: all 0.5s ease;
124-
}
125-
126-
.fade-enter,
127-
.fade-leave-active {
128-
opacity: 0;
129-
}
130-
13160
.demo {
13261
overflow: hidden;
13362
134-
.list {
135-
margin: 0 -5px;
136-
}
137-
138-
.item {
139-
width: calc(25% - 10px);
140-
margin: 0 5px;
141-
float: left;
142-
143-
&:last-child {
144-
margin-right: 0;
145-
}
146-
}
147-
14863
.scope {
14964
background-color: #fff;
15065
border-radius: 3px;
@@ -170,6 +85,8 @@ export default {
17085
17186
.c {
17287
padding: 10px;
88+
height: 50px;
89+
box-sizing: border-box;
17390
17491
&._svg {
17592
.icon-svg {

‎src/pages/layout/index.vue

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,25 @@
11
<template>
22
<div class="page-layout" :class="{ collapse: menuCollapse }">
3+
<!-- 遮罩层 -->
34
<div class="page-layout__mask" @click="COLLAPSE_MENU(true)"></div>
45

56
<div class="page-layout__left">
7+
<!-- 侧栏 -->
68
<slider></slider>
79
</div>
810

911
<div class="page-layout__right">
12+
<!-- 顶栏 -->
1013
<div class="page-layout__topbar">
1114
<topbar></topbar>
1215
</div>
1316

17+
<!-- 页面进程 -->
1418
<div class="page-layout__process" v-if="app.conf.showProcess">
1519
<cl-process />
1620
</div>
1721

22+
<!-- 页面视图 -->
1823
<div class="page-layout__container">
1924
<div class="page-layout__view">
2025
<keep-alive>

‎src/pages/layout/topbar.vue

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<template>
22
<div class="app-topbar">
33
<div class="app-topbar__collapse" @click="collapse">
4-
<icon-svg name="icon-menu"></icon-svg>
4+
<i :class="[menuCollapse ? 'el-icon-s-unfold' : 'el-icon-s-fold']"></i>
55
</div>
66

77
<!-- 一级菜单 -->
@@ -97,9 +97,9 @@ export default {
9797
cursor: pointer;
9898
margin-right: 10px;
9999
100-
.icon-svg {
101-
height: 22px;
102-
width: 22px;
100+
i {
101+
font-size: 22px;
102+
color: #666;
103103
}
104104
}
105105

0 commit comments

Comments
 (0)