This commit is contained in:
sc
parent
ed611405c7
commit
b67a8f8de5
|
|
@ -1,7 +1,10 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="adminui-header">
|
<div class="adminui-header">
|
||||||
<div class="left-panel">
|
<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" >
|
<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>
|
<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>
|
</template>
|
||||||
|
|
@ -92,6 +95,11 @@
|
||||||
this.userNameF = this.userName.substring(0,1);
|
this.userNameF = this.userName.substring(0,1);
|
||||||
this.getBreadcrumb();
|
this.getBreadcrumb();
|
||||||
},
|
},
|
||||||
|
computed:{
|
||||||
|
ismobile(){
|
||||||
|
return this.$store.state.global.ismobile
|
||||||
|
}
|
||||||
|
},
|
||||||
watch: {
|
watch: {
|
||||||
$route() {
|
$route() {
|
||||||
this.getBreadcrumb();
|
this.getBreadcrumb();
|
||||||
|
|
@ -122,6 +130,10 @@
|
||||||
//标记已读
|
//标记已读
|
||||||
markRead(){
|
markRead(){
|
||||||
this.msgList = []
|
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>
|
<template>
|
||||||
<Side></Side>
|
<Side v-if="!ismobile"></Side>
|
||||||
|
|
||||||
<div class="aminui-body el-container">
|
<div class="aminui-body el-container">
|
||||||
<Head></Head>
|
<Head @mobile-nav="mobileNav"></Head>
|
||||||
<Tags></Tags>
|
<Tags v-if="!ismobile"></Tags>
|
||||||
<div class="adminui-main" id="adminui-main">
|
<div class="adminui-main" id="adminui-main">
|
||||||
<router-view></router-view>
|
<router-view></router-view>
|
||||||
</div>
|
</div>
|
||||||
</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>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import Side from './components/side.vue';
|
import Side from './components/side.vue';
|
||||||
|
import SideM from './components/sideM.vue';
|
||||||
import Head from './components/head.vue';
|
import Head from './components/head.vue';
|
||||||
import Tags from './components/tags.vue';
|
import Tags from './components/tags.vue';
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'index',
|
name: 'index',
|
||||||
setup() {},
|
|
||||||
components: {
|
components: {
|
||||||
Side,
|
Side,
|
||||||
|
SideM,
|
||||||
Head,
|
Head,
|
||||||
Tags
|
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>
|
</script>
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,10 @@
|
||||||
|
export default {
|
||||||
|
state: {
|
||||||
|
ismobile: false,
|
||||||
|
},
|
||||||
|
mutations: {
|
||||||
|
SET_ismobile(state, key){
|
||||||
|
state.ismobile = key
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue