4 changed files with 33 additions and 255 deletions
@ -1,222 +0,0 @@ |
|||||
<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