mirror of
https://github.com/cool-team-official/cool-admin-vue.git
synced 2025-12-12 05:32:48 +00:00
优化菜单收起展开状态
This commit is contained in:
icssoa
parent
0d25d29c79
commit
d0b5acad68
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "cool-admin-vue",
|
||||
"version": "3.1.5",
|
||||
"version": "3.1.6",
|
||||
"scripts": {
|
||||
"serve": "vue-cli-service serve",
|
||||
"build": "vue-cli-service build",
|
||||
|
||||
@ -7,7 +7,7 @@
|
||||
@select="onSelect"
|
||||
>
|
||||
<el-menu-item v-for="(item, index) in list" :index="`${index}`" :key="index">
|
||||
<icon-svg v-if="item.icon" :name="item.icon"></icon-svg>
|
||||
<icon-svg v-if="item.icon" :name="item.icon" :size="18"></icon-svg>
|
||||
<span>{{ item.name }}</span>
|
||||
</el-menu-item>
|
||||
</el-menu>
|
||||
@ -76,6 +76,8 @@ export default {
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.cl-menu-topbar {
|
||||
margin-right: 10px;
|
||||
|
||||
/deep/.el-menu {
|
||||
height: 50px;
|
||||
background: transparent;
|
||||
@ -83,12 +85,12 @@ export default {
|
||||
overflow: hidden;
|
||||
|
||||
.el-menu-item {
|
||||
height: 50px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background: transparent;
|
||||
height: 50px;
|
||||
border-bottom: 0;
|
||||
padding: 0 30px;
|
||||
padding: 0 20px;
|
||||
background: transparent;
|
||||
|
||||
span {
|
||||
font-size: 12px;
|
||||
@ -97,13 +99,10 @@ export default {
|
||||
}
|
||||
|
||||
&.is-active {
|
||||
background: rgba(255, 255, 255, 0.13);
|
||||
color: $color-primary;
|
||||
}
|
||||
|
||||
/deep/.icon-svg {
|
||||
height: 18px;
|
||||
width: 18px;
|
||||
margin-right: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
@ -82,10 +82,8 @@ export default {
|
||||
white-space: nowrap;
|
||||
|
||||
/deep/.el-breadcrumb {
|
||||
margin: 0 10px;
|
||||
|
||||
&__inner {
|
||||
font-size: 12px;
|
||||
font-size: 13px;
|
||||
padding: 0 10px;
|
||||
font-weight: normal;
|
||||
letter-spacing: 1px;
|
||||
@ -93,8 +91,7 @@ export default {
|
||||
}
|
||||
|
||||
.title {
|
||||
display: none;
|
||||
font-size: 15px;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
||||
@ -1,26 +1,18 @@
|
||||
<template>
|
||||
<el-scrollbar>
|
||||
<div class="demo">
|
||||
<div class="list">
|
||||
<div
|
||||
class="item"
|
||||
:style="{
|
||||
width: `calc(${100 / cols}% - 10px)`
|
||||
}"
|
||||
:ref="`col-${index + 1}`"
|
||||
v-for="(item, index) in layout"
|
||||
<el-row :gutter="10">
|
||||
<el-col
|
||||
v-for="(item, index) in list"
|
||||
:key="index"
|
||||
:xs="24"
|
||||
:sm="12"
|
||||
:md="8"
|
||||
:lg="6"
|
||||
>
|
||||
<transition-group name="fade">
|
||||
<component
|
||||
:ref="item2"
|
||||
:is="item2"
|
||||
:key="item2 + index2"
|
||||
v-for="(item2, index2) in item"
|
||||
></component>
|
||||
</transition-group>
|
||||
</div>
|
||||
</div>
|
||||
<component :is="item"></component>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</el-scrollbar>
|
||||
</template>
|
||||
@ -58,93 +50,16 @@ export default {
|
||||
"b-cl-context-menu",
|
||||
"b-error-page",
|
||||
"b-cl-editor-quill"
|
||||
],
|
||||
cols: 4,
|
||||
layout: [[], [], [], []]
|
||||
]
|
||||
};
|
||||
},
|
||||
|
||||
mounted() {
|
||||
const width = document.body.clientWidth;
|
||||
|
||||
if (width < 768) {
|
||||
this.cols = 1;
|
||||
} else if (width < 1000) {
|
||||
this.cols = 2;
|
||||
} else if (width < 1500) {
|
||||
this.cols = 3;
|
||||
} else {
|
||||
this.cols = 4;
|
||||
}
|
||||
|
||||
this.append();
|
||||
},
|
||||
|
||||
methods: {
|
||||
getHeight(name) {
|
||||
return this.$refs[name][0].offsetHeight;
|
||||
},
|
||||
|
||||
selectCol() {
|
||||
let arr = new Array(this.cols).fill(1);
|
||||
|
||||
for (let i = 0; i < this.cols; i++) {
|
||||
arr[i] = this.getHeight(`col-${i + 1}`);
|
||||
}
|
||||
|
||||
let min = Math.min.apply(this, arr);
|
||||
|
||||
return arr.indexOf(min);
|
||||
},
|
||||
|
||||
append(index = 0) {
|
||||
const i = this.selectCol();
|
||||
const item = this.list[index];
|
||||
|
||||
if (!item) {
|
||||
return false;
|
||||
}
|
||||
|
||||
this.layout[i].push(item);
|
||||
|
||||
this.$nextTick(() => {
|
||||
setTimeout(() => {
|
||||
this.append(index + 1);
|
||||
}, 100);
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.fade-enter-active,
|
||||
.fade-leave-active {
|
||||
transition: all 0.5s ease;
|
||||
}
|
||||
|
||||
.fade-enter,
|
||||
.fade-leave-active {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.demo {
|
||||
overflow: hidden;
|
||||
|
||||
.list {
|
||||
margin: 0 -5px;
|
||||
}
|
||||
|
||||
.item {
|
||||
width: calc(25% - 10px);
|
||||
margin: 0 5px;
|
||||
float: left;
|
||||
|
||||
&:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.scope {
|
||||
background-color: #fff;
|
||||
border-radius: 3px;
|
||||
@ -170,6 +85,8 @@ export default {
|
||||
|
||||
.c {
|
||||
padding: 10px;
|
||||
height: 50px;
|
||||
box-sizing: border-box;
|
||||
|
||||
&._svg {
|
||||
.icon-svg {
|
||||
|
||||
@ -1,20 +1,25 @@
|
||||
<template>
|
||||
<div class="page-layout" :class="{ collapse: menuCollapse }">
|
||||
<!-- 遮罩层 -->
|
||||
<div class="page-layout__mask" @click="COLLAPSE_MENU(true)"></div>
|
||||
|
||||
<div class="page-layout__left">
|
||||
<!-- 侧栏 -->
|
||||
<slider></slider>
|
||||
</div>
|
||||
|
||||
<div class="page-layout__right">
|
||||
<!-- 顶栏 -->
|
||||
<div class="page-layout__topbar">
|
||||
<topbar></topbar>
|
||||
</div>
|
||||
|
||||
<!-- 页面进程 -->
|
||||
<div class="page-layout__process" v-if="app.conf.showProcess">
|
||||
<cl-process />
|
||||
</div>
|
||||
|
||||
<!-- 页面视图 -->
|
||||
<div class="page-layout__container">
|
||||
<div class="page-layout__view">
|
||||
<keep-alive>
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<div class="app-topbar">
|
||||
<div class="app-topbar__collapse" @click="collapse">
|
||||
<icon-svg name="icon-menu"></icon-svg>
|
||||
<i :class="[menuCollapse ? 'el-icon-s-unfold' : 'el-icon-s-fold']"></i>
|
||||
</div>
|
||||
|
||||
<!-- 一级菜单 -->
|
||||
@ -97,9 +97,9 @@ export default {
|
||||
cursor: pointer;
|
||||
margin-right: 10px;
|
||||
|
||||
.icon-svg {
|
||||
height: 22px;
|
||||
width: 22px;
|
||||
i {
|
||||
font-size: 22px;
|
||||
color: #666;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user