前端初始化
This commit is contained in:
zer0Black
@@ -0,0 +1,194 @@
|
||||
<template>
|
||||
<div class="menu-submenu" :class="{'submenu-active': $route.path.indexOf(path) !== -1}">
|
||||
<!-- 遍历菜单数据 -->
|
||||
<MenuItem :key="item.id" v-for="(item, index) in menuData" :menuItemData="item">
|
||||
<!-- 没有children的子菜单 -->
|
||||
<template v-if="!item.children">
|
||||
<div class="menu-content" :class="{'active': item.href.indexOf($route.path) !== -1 || (item.href==$store.state.pathUrl)}">
|
||||
<div class="menu-data" @click="handleRouter(item)"
|
||||
:style="{'padding-left': item.level >= 2 ? '30px' : '10px'}">
|
||||
<div class="menu-data-flex">
|
||||
<img class="menu-icon" v-if="item.icon" :src="item.icon" alt="">
|
||||
<span> <i class="icon-level2" v-if="item.level===3"></i> {{ item.label }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<!-- 有children的子菜单 -->
|
||||
<template v-else>
|
||||
<div class="menu-content"
|
||||
:class="{'active': item.href.indexOf($route.path) !== -1 || (item.href==$store.state.pathUrl), 'is-collage': !item.isCollage}"
|
||||
@click="collageMenu(item)">
|
||||
<div class="menu-data"
|
||||
:class="item.level === 1 ? 'bor-b' : ''"
|
||||
:style="{'padding-left': item.level >= 2 ? '30px' : '10px'}">
|
||||
<div class="menu-data-flex">
|
||||
<img class="menu-icon" v-if="item.icon" :src="item.icon" alt="">
|
||||
<span>{{ item.label }}</span>
|
||||
</div>
|
||||
<template v-if="item.level === 1">
|
||||
<i v-if="!item.isCollage" class="el-icon-arrow-right" style="margin-right: 12px;"></i>
|
||||
<i v-else class="el-icon-arrow-down" style="margin-right: 12px;"></i>
|
||||
</template>
|
||||
<template v-else>
|
||||
<i v-if="!item.isCollage" class="el-icon-plus" style="margin-right: 12px;"></i>
|
||||
<i v-else class="el-icon-minus" style="margin-right: 12px;"></i>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 递归操作 -->
|
||||
<Menu :menuData="item.children" :path="item.href"></Menu>
|
||||
</template>
|
||||
</MenuItem>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {createLogger} from 'vuex';
|
||||
import MenuItem from "./MenuItem";
|
||||
import login from '../api/modules/login'
|
||||
import store from '../store'
|
||||
export default {
|
||||
name: "Menu",
|
||||
props: ["menuData", "path"],
|
||||
components: {
|
||||
MenuItem
|
||||
},
|
||||
methods: {
|
||||
handleRouter(item) {
|
||||
if(item.belong == 0){
|
||||
this.$store.commit('saveMenuName', item.label);
|
||||
if(this.$route.path == '/system/401Page'){
|
||||
|
||||
}else{
|
||||
this.$router.push({name: '401Page', query: this.$route.query});
|
||||
}
|
||||
}else{
|
||||
this.$store.commit('savePathUrl', item.href);
|
||||
if (item.isUrl && Number(item.isUrl || 0)) {
|
||||
var param = this.$route.query
|
||||
// delete(this.$route.query.itemHref)
|
||||
|
||||
// param.itemHref = item.href
|
||||
if(this.$route.path == '/system/urlIndex'){
|
||||
this.$store.commit('saveMenuName', item.label);
|
||||
login.pageLog(this.$store.state.menuName).then(res => {
|
||||
}).catch(_ => {
|
||||
})
|
||||
}else{
|
||||
this.$store.commit('saveMenuName', item.label);
|
||||
this.$router.push({name: 'urlIndex', query: param});
|
||||
}
|
||||
} else {
|
||||
if (this.$route.path === item.href) return;
|
||||
// delete(this.$route.query.itemHref)
|
||||
this.$router.push({path: item.href, query: this.$route.query});
|
||||
}
|
||||
}
|
||||
},
|
||||
collageMenu(item) {
|
||||
item.isCollage = !item.isCollage;
|
||||
console.log(item.isCollage);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.menu-submenu {
|
||||
background-color: #f3f6fd;
|
||||
|
||||
&.submenu-active {
|
||||
// background-color: #f3f6fd;
|
||||
|
||||
}
|
||||
|
||||
.menu-content {
|
||||
overflow: hidden;
|
||||
height: 48px;
|
||||
|
||||
&.active {
|
||||
.menu-data {
|
||||
position: relative;
|
||||
// background-color: rgba(216, 230, 246, 1);
|
||||
background-color: #c7d0dd;
|
||||
// border-radius: 100px 0 0 100px;
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
width: 4px;
|
||||
background-color: #168fe3;
|
||||
}
|
||||
|
||||
span {
|
||||
// color: rgba(24, 144, 255, 1);
|
||||
color: #333;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.is-collage + .menu-submenu {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.menu-data {
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
/*justify-content: space-between;*/
|
||||
align-items: center;
|
||||
padding-left: 21px;
|
||||
// margin-top: 6px;
|
||||
height: 100%;
|
||||
// background-color: #EDEDED;
|
||||
|
||||
.menu-data-flex {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.menu-icon {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
margin-right: 5px;
|
||||
margin-top: 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
span {
|
||||
color: #262626;
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
/*white-space: nowrap;*/
|
||||
}
|
||||
}
|
||||
|
||||
.menu-submenu {
|
||||
.menu-data {
|
||||
span {
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.icon-level2 {
|
||||
display: inline-block;
|
||||
width: 3px;
|
||||
height: 3px;
|
||||
background-color: #333;
|
||||
// background-color: rgba(183, 191, 195, 1);
|
||||
border-radius: 50%;
|
||||
margin-right: 3px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.bor-b {
|
||||
border-top: 1px solid #e3e8f3;
|
||||
border-bottom: 1px solid #e3e8f3;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user