5 changed files with 275 additions and 219 deletions
@ -0,0 +1,222 @@ |
|||||
|
<template> |
||||
|
<!-- 瀑布流版本布局 + 高度随宽度调整变化 --> |
||||
|
<el-card class="homeMenuPage" v-resize="setMaxHeight" v-loading="loading"> |
||||
|
<div class="firstMenuContain homeMenuPage-List"> |
||||
|
<div |
||||
|
class="firstMenuItem menuItem" |
||||
|
v-for="(item,index) in navList" |
||||
|
:key="index" |
||||
|
> |
||||
|
<div class="firstTitle" v-if="item.meta"> |
||||
|
<div class="icon"><svg-icon :icon-class="item.meta.icon" style="fill:currentColor; color:#fff;"/></div> |
||||
|
<div>{{item.meta.title}}</div> |
||||
|
</div> |
||||
|
<ul class="menuInfo" v-if="item.children && item.children.length > 0"> |
||||
|
<li |
||||
|
v-for="(item2,index2) in item.children" |
||||
|
:key="index2" |
||||
|
> |
||||
|
<div class="title"> |
||||
|
{{item2.meta.title}} |
||||
|
<i class="el-icon-arrow-right"></i> |
||||
|
</div> |
||||
|
<!-- 有下级菜单 --> |
||||
|
<div class="lastList" v-if="item2.children && item2.children.length > 0"> |
||||
|
<div |
||||
|
v-for="(item3,index3) in item2.children" |
||||
|
:key="index3" |
||||
|
class="item" |
||||
|
> |
||||
|
<span @click="goPage(item3)">{{item3.meta.title}}</span> |
||||
|
</div> |
||||
|
</div> |
||||
|
<!-- 如果二级为最后一级，统一格式，补充到children中 --> |
||||
|
<div class="lastList" v-else> |
||||
|
<div class="item"> |
||||
|
<span @click="goPage(item2)">{{item2.meta.title}}</span> |
||||
|
</div> |
||||
|
</div> |
||||
|
</li> |
||||
|
</ul> |
||||
|
</div> |
||||
|
<span class="firstMenuItem break"></span> |
||||
|
<span class="firstMenuItem break"></span> |
||||
|
<span class="firstMenuItem break"></span> |
||||
|
</div> |
||||
|
</el-card> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import { mapGetters } from 'vuex' |
||||
|
export default { |
||||
|
directives: { |
||||
|
// 页面宽度变化，重新计算总高度 |
||||
|
resize: { // 指令的名称 |
||||
|
bind(el, binding) { // el为绑定的元素，binding为绑定给指令的对象 |
||||
|
let width = '', height = ''; |
||||
|
function isReize() { |
||||
|
const style = document.defaultView.getComputedStyle(el); |
||||
|
if (width !== style.width || height !== style.height) { |
||||
|
binding.value(); // 关键 |
||||
|
} |
||||
|
width = style.width; |
||||
|
height = style.height; |
||||
|
} |
||||
|
el.__vueSetInterval__ = setInterval(isReize, 300); |
||||
|
}, |
||||
|
unbind(el) { |
||||
|
clearInterval(el.__vueSetInterval__); |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
name: 'Dashboard', |
||||
|
data() { |
||||
|
return { |
||||
|
loading:true, |
||||
|
navList:[], |
||||
|
} |
||||
|
}, |
||||
|
watch: { |
||||
|
permission_routes(val, oldVal) { |
||||
|
this.initData(val) |
||||
|
} |
||||
|
}, |
||||
|
computed: { |
||||
|
...mapGetters([ |
||||
|
'permission_routes' |
||||
|
]) |
||||
|
}, |
||||
|
mounted(){ |
||||
|
console.log(90,this.permission_routes) |
||||
|
this.initData(this.permission_routes) |
||||
|
}, |
||||
|
methods:{ |
||||
|
initData(data){ |
||||
|
data.forEach(item => { |
||||
|
if(!item.hidden && item.path !== '/') { |
||||
|
this.navList.push(item) |
||||
|
} |
||||
|
}) |
||||
|
this.$nextTick(()=>{ |
||||
|
this.setMaxHeight() |
||||
|
}) |
||||
|
}, |
||||
|
goPage(item){ |
||||
|
this.$router.push({name: item.name}) |
||||
|
}, |
||||
|
setMaxHeight(){ |
||||
|
// todo：用this.$route.path != /dashboard 判断 |
||||
|
console.log("setMaxHeight",this.$route.path) |
||||
|
if(document.getElementsByClassName("homeMenuPage-List").length <= 0){ |
||||
|
return |
||||
|
} |
||||
|
let _items = document.getElementsByClassName("menuItem") |
||||
|
let _left = []; |
||||
|
let _right = []; |
||||
|
let _left_num = 0; |
||||
|
let _right_num = 0; |
||||
|
_items.forEach((item,key)=>{ |
||||
|
// 左侧 |
||||
|
if(key % 2 == 0){ |
||||
|
_left.push(item.offsetHeight) |
||||
|
_left_num += Number(item.offsetHeight) |
||||
|
} |
||||
|
// 右侧 |
||||
|
else{ |
||||
|
_right.push(item.offsetHeight) |
||||
|
_right_num += Number(item.offsetHeight) |
||||
|
} |
||||
|
}) |
||||
|
let _max = _left_num > _right_num ? _left_num : _right_num |
||||
|
_max += 20 * _items.length |
||||
|
document.getElementsByClassName("homeMenuPage-List")[0].style.height = _max + 'px' |
||||
|
this.loading = false |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
<style lang="scss" scoped> |
||||
|
$iconSize:26px; |
||||
|
.homeMenuPage{ |
||||
|
height: 100%; |
||||
|
overflow: auto; |
||||
|
// padding: 20px 0; |
||||
|
} |
||||
|
.firstMenuContain { |
||||
|
display: flex; |
||||
|
flex-flow: column wrap; |
||||
|
align-content: space-between; |
||||
|
/* 容器必须有固定高度 |
||||
|
* 且高度大于最高的列高 */ |
||||
|
// height: 2500px; |
||||
|
.firstMenuItem { |
||||
|
width: calc(50% - 20px); |
||||
|
margin-bottom: 20px; |
||||
|
|
||||
|
.firstTitle{ |
||||
|
display: flex; |
||||
|
font-weight: bold; |
||||
|
font-size: 18px; |
||||
|
.icon{ |
||||
|
background: #409eff; |
||||
|
color: #fff; |
||||
|
border-radius: 4px; |
||||
|
width: $iconSize; |
||||
|
height: $iconSize; |
||||
|
line-height: $iconSize; |
||||
|
overflow: hidden; |
||||
|
text-align: center; |
||||
|
margin-right: 10px; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.menuInfo{ |
||||
|
background: #f9fafb; |
||||
|
margin: 20px 0; |
||||
|
padding: 5px 0; |
||||
|
li{ |
||||
|
list-style: none; |
||||
|
display: flex; |
||||
|
padding-top: 10px; |
||||
|
.title{ |
||||
|
width: 240px; |
||||
|
text-align: right; |
||||
|
font-weight: bold; |
||||
|
flex-shrink: 0; |
||||
|
.el-icon-arrow-right{ |
||||
|
font-weight: bold; |
||||
|
font-size: 14px; |
||||
|
} |
||||
|
} |
||||
|
.lastList{ |
||||
|
display: flex; |
||||
|
flex-wrap: wrap; |
||||
|
margin-left: 15px; |
||||
|
.item{ |
||||
|
margin-right: 25px; |
||||
|
margin-bottom: 10px; |
||||
|
cursor: pointer; |
||||
|
|
||||
|
&:hover{ |
||||
|
color: #409eff; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
/* 将内容块重排为4列 */ |
||||
|
&:nth-of-type(2n+1) { order: 1; } |
||||
|
&:nth-of-type(2n) { order: 2; } |
||||
|
|
||||
|
/* 强制换列 */ |
||||
|
&.break { |
||||
|
flex-basis: 100%; |
||||
|
width: 0; |
||||
|
margin: 0; |
||||
|
content: ""; |
||||
|
padding: 0; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
Loading…
Reference in new issue