This commit is contained in:
sc
parent
ed611405c7
commit
b67a8f8de5
|
|
@ -1,7 +1,10 @@
|
|||
<template>
|
||||
<div class="adminui-header">
|
||||
<div class="left-panel">
|
||||
<el-breadcrumb separator-class="el-icon-arrow-right">
|
||||
<div v-if="ismobile" class="mobile-nav-icon panel-item" @click="mobileNav">
|
||||
<i class="el-icon-menu"></i>
|
||||
</div>
|
||||
<el-breadcrumb v-if="!ismobile" separator-class="el-icon-arrow-right">
|
||||
<template v-for="(item) in breadList" v-bind:key="item" >
|
||||
<el-breadcrumb-item v-if="item.path !='/'"><i v-if="item.meta&&item.meta.icon" :class="item.meta.icon || 'el-icon-menu'"></i>{{item.meta.title}}</el-breadcrumb-item>
|
||||
</template>
|
||||
|
|
@ -92,6 +95,11 @@
|
|||
this.userNameF = this.userName.substring(0,1);
|
||||
this.getBreadcrumb();
|
||||
},
|
||||
computed:{
|
||||
ismobile(){
|
||||
return this.$store.state.global.ismobile
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
$route() {
|
||||
this.getBreadcrumb();
|
||||
|
|
@ -122,6 +130,10 @@
|
|||
//标记已读
|
||||
markRead(){
|
||||
this.msgList = []
|
||||
},
|
||||
//移动端打开菜单，暴露父组件事件
|
||||
mobileNav(){
|
||||
this.$emit('mobile-nav')
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,58 @@
|
|||
<template>
|
||||
<el-menu :default-active="$route.fullPath" @select="select" router>
|
||||
<NavMenu :navMenus="menu"></NavMenu>
|
||||
</el-menu>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import NavMenu from './NavMenu.vue';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
NavMenu
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
menu: [],
|
||||
}
|
||||
},
|
||||
created: function() {
|
||||
var menu = this.$TOOL.data.get("user").menuList;
|
||||
var home = this.$router.options.routes[0].children[0];
|
||||
menu.unshift(home);
|
||||
this.menu = this.filterUrl(menu)
|
||||
},
|
||||
setup() {
|
||||
|
||||
},
|
||||
watch: {
|
||||
|
||||
},
|
||||
methods: {
|
||||
select(){
|
||||
this.$parent.$el.click()
|
||||
},
|
||||
//转换外部链接的路由
|
||||
filterUrl(map){
|
||||
map.forEach((item,index) => {
|
||||
item.meta = item.meta?item.meta:{};
|
||||
//处理隐藏
|
||||
if(item.meta.hidden){
|
||||
map.splice(index, 1);
|
||||
}
|
||||
//处理http
|
||||
if(item.path.startsWith('http') && item.meta.target!='_blank'){
|
||||
item.path = `/${encodeURIComponent(item.path)}`;
|
||||
}
|
||||
//递归循环
|
||||
if(item.children&&item.children.length > 0){
|
||||
this.filterUrl(item.children);
|
||||
}
|
||||
|
||||
})
|
||||
|
||||
return map;
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -1,28 +1,60 @@
|
|||
<template>
|
||||
<Side></Side>
|
||||
<Side v-if="!ismobile"></Side>
|
||||
|
||||
<div class="aminui-body el-container">
|
||||
<Head></Head>
|
||||
<Tags></Tags>
|
||||
<Head @mobile-nav="mobileNav"></Head>
|
||||
<Tags v-if="!ismobile"></Tags>
|
||||
<div class="adminui-main" id="adminui-main">
|
||||
<router-view></router-view>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<el-drawer ref="mobileNavBox" title="移动端菜单" :size="240" v-model="mobileNavBox" direction="ltr" :with-header="false" append-to-body destroy-on-close>
|
||||
<SideM></SideM>
|
||||
</el-drawer>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Side from './components/side.vue';
|
||||
import SideM from './components/sideM.vue';
|
||||
import Head from './components/head.vue';
|
||||
import Tags from './components/tags.vue';
|
||||
|
||||
export default {
|
||||
name: 'index',
|
||||
setup() {},
|
||||
components: {
|
||||
Side,
|
||||
SideM,
|
||||
Head,
|
||||
Tags
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
mobileNavBox: false
|
||||
}
|
||||
},
|
||||
computed:{
|
||||
ismobile(){
|
||||
return this.$store.state.global.ismobile
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.onLayoutResize();
|
||||
window.addEventListener('resize', this.onLayoutResize);
|
||||
},
|
||||
methods: {
|
||||
onLayoutResize(){
|
||||
const clientWidth = document.body.clientWidth;
|
||||
if(clientWidth < 992){
|
||||
this.$store.commit("SET_ismobile", true)
|
||||
}else{
|
||||
this.$store.commit("SET_ismobile", false)
|
||||
}
|
||||
},
|
||||
mobileNav(){
|
||||
this.mobileNavBox = true
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,10 @@
|
|||
export default {
|
||||
state: {
|
||||
ismobile: false,
|
||||
},
|
||||
mutations: {
|
||||
SET_ismobile(state, key){
|
||||
state.ismobile = key
|
||||
}
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue