Skip to content

Vue Manage System
Vue Manage System

绝世唐门三哥 / Vue Manage System

通知 3
Star 0
Fork 0
Vue Manage System
Vue Manage System

前往新版Gitcode，体验更适合开发者的 AI 搜索 >>

提交 60eeaaf3 编写于 作者: L linxin
浏览文件
操作

EventBus折叠改为链式调用

上级 3022814f
隐藏空白更改
内联 并排
Showing with 189 addition and 172 deletion
src/components/common/Header.vue
浏览文件 @ 60eeaaf3
......@@ -38,9 +38,6 @@
<i class="el-icon-caret-bottom"></i>
</span>
<el-dropdown-menu slot="dropdown">
<a href="http://blog.gdfengshuo.com/about/" target="_blank">
<el-dropdown-item>关于作者</el-dropdown-item>
</a>
<a href="https://github.com/lin-xin/vue-manage-system" target="_blank">
<el-dropdown-item>项目仓库</el-dropdown-item>
</a>
......
src/components/common/Home.vue
浏览文件 @ 60eeaaf3
......@@ -17,33 +17,35 @@
</template>
<script>
import vHead from './Header.vue';
import vSidebar from './Sidebar.vue';
import vTags from './Tags.vue';
import bus from './bus';
export default {
data(){
return {
tagsList: [],
collapse: false
}
},
components:{
vHead, vSidebar, vTags
},
created(){
bus.$on('collapse', msg => {
this.collapse = msg;
})
import vHead from './Header.vue';
import vSidebar from './Sidebar.vue';
import vTags from './Tags.vue';
import bus from './bus';
export default {
data() {
return {
tagsList: [],
collapse: false
};
},
components: {
vHead,
vSidebar,
vTags
},
created() {
bus.$on('collapse-content', msg => {
this.collapse = msg;
});
// 只有在标签页列表里的页面才使用keep-alive，即关闭标签之后就不保存到内存中了。
bus.$on('tags', msg => {
let arr = [];
for(let i = 0, len = msg.length; i < len; i ++){
msg[i].name && arr.push(msg[i].name);
}
this.tagsList = arr;
})
}
// 只有在标签页列表里的页面才使用keep-alive，即关闭标签之后就不保存到内存中了。
bus.$on('tags', msg => {
let arr = [];
for (let i = 0, len = msg.length; i < len; i++) {
msg[i].name && arr.push(msg[i].name);
}
this.tagsList = arr;
});
}
};
</script>
src/components/common/Sidebar.vue
浏览文件 @ 60eeaaf3
<template>
<div class="sidebar">
<el-menu class="sidebar-el-menu" :default-active="onRoutes" :collapse="collapse" background-color="#324157"
text-color="#bfcbd9" active-text-color="#20a0ff" unique-opened router>
<el-menu
class="sidebar-el-menu"
:default-active="onRoutes"
:collapse="collapse"
background-color="#324157"
text-color="#bfcbd9"
active-text-color="#20a0ff"
unique-opened
router
>
<template v-for="item in items">
<template v-if="item.subs">
<el-submenu :index="item.index" :key="item.index">
<template slot="title">
<i :class="item.icon"></i><span slot="title">{{ item.title }}</span>
<i :class="item.icon"></i>
<span slot="title">{{ item.title }}</span>
</template>
<template v-for="subItem in item.subs">
<el-submenu v-if="subItem.subs" :index="subItem.index" :key="subItem.index">
<el-submenu
v-if="subItem.subs"
:index="subItem.index"
:key="subItem.index"
>
<template slot="title">{{ subItem.title }}</template>
<el-menu-item v-for="(threeItem,i) in subItem.subs" :key="i" :index="threeItem.index">
{{ threeItem.title }}
</el-menu-item>
<el-menu-item
v-for="(threeItem,i) in subItem.subs"
:key="i"
:index="threeItem.index"
>{{ threeItem.title }}</el-menu-item>
</el-submenu>
<el-menu-item v-else :index="subItem.index" :key="subItem.index">
{{ subItem.title }}
</el-menu-item>
<el-menu-item
v-else
:index="subItem.index"
:key="subItem.index"
>{{ subItem.title }}</el-menu-item>
</template>
</el-submenu>
</template>
<template v-else>
<el-menu-item :index="item.index" :key="item.index">
<i :class="item.icon"></i><span slot="title">{{ item.title }}</span>
<i :class="item.icon"></i>
<span slot="title">{{ item.title }}</span>
</el-menu-item>
</template>
</template>
......@@ -32,140 +50,140 @@
</template>
<script>
import bus from '../common/bus';
export default {
data() {
return {
collapse: false,
items: [
{
icon: 'el-icon-lx-home',
index: 'dashboard',
title: '系统首页'
},
{
icon: 'el-icon-lx-cascades',
index: 'table',
title: '基础表格'
},
{
icon: 'el-icon-lx-copy',
index: 'tabs',
title: 'tab选项卡'
},
{
icon: 'el-icon-lx-calendar',
index: '3',
title: '表单相关',
subs: [
{
index: 'form',
title: '基本表单'
},
{
index: '3-2',
title: '三级菜单',
subs: [
{
index: 'editor',
title: '富文本编辑器'
},
{
index: 'markdown',
title: 'markdown编辑器'
},
]
},
{
index: 'upload',
title: '文件上传'
}
]
},
{
icon: 'el-icon-lx-emoji',
index: 'icon',
title: '自定义图标'
},
{
icon: 'el-icon-pie-chart',
index: 'charts',
title: 'schart图表'
},
{
icon: 'el-icon-rank',
index: '6',
title: '拖拽组件',
subs: [
{
index: 'drag',
title: '拖拽列表',
},
{
index: 'dialog',
title: '拖拽弹框',
}
]
},
{
icon: 'el-icon-lx-global',
index: 'i18n',
title: '国际化功能'
},
{
icon: 'el-icon-lx-warn',
index: '7',
title: '错误处理',
subs: [
{
index: 'permission',
title: '权限测试'
},
{
index: '404',
title: '404页面'
}
]
}
,
{
icon: 'el-icon-lx-redpacket_fill',
index: '/donate',
title: '支持作者'
}
]
}
},
computed:{
onRoutes(){
return this.$route.path.replace('/','');
}
},
created(){
// 通过 Event Bus 进行组件间通信，来折叠侧边栏
bus.$on('collapse', msg => {
this.collapse = msg;
})
import bus from '../common/bus';
export default {
data() {
return {
collapse: false,
items: [
{
icon: 'el-icon-lx-home',
index: 'dashboard',
title: '系统首页'
},
{
icon: 'el-icon-lx-cascades',
index: 'table',
title: '基础表格'
},
{
icon: 'el-icon-lx-copy',
index: 'tabs',
title: 'tab选项卡'
},
{
icon: 'el-icon-lx-calendar',
index: '3',
title: '表单相关',
subs: [
{
index: 'form',
title: '基本表单'
},
{
index: '3-2',
title: '三级菜单',
subs: [
{
index: 'editor',
title: '富文本编辑器'
},
{
index: 'markdown',
title: 'markdown编辑器'
}
]
},
{
index: 'upload',
title: '文件上传'
}
]
},
{
icon: 'el-icon-lx-emoji',
index: 'icon',
title: '自定义图标'
},
{
icon: 'el-icon-pie-chart',
index: 'charts',
title: 'schart图表'
},
{
icon: 'el-icon-rank',
index: '6',
title: '拖拽组件',
subs: [
{
index: 'drag',
title: '拖拽列表'
},
{
index: 'dialog',
title: '拖拽弹框'
}
]
},
{
icon: 'el-icon-lx-global',
index: 'i18n',
title: '国际化功能'
},
{
icon: 'el-icon-lx-warn',
index: '7',
title: '错误处理',
subs: [
{
index: 'permission',
title: '权限测试'
},
{
index: '404',
title: '404页面'
}
]
},
{
icon: 'el-icon-lx-redpacket_fill',
index: '/donate',
title: '支持作者'
}
]
};
},
computed: {
onRoutes() {
return this.$route.path.replace('/', '');
}
},
created() {
// 通过 Event Bus 进行组件间通信，来折叠侧边栏
bus.$on('collapse', msg => {
this.collapse = msg;
bus.$emit('collapse-content', msg);
});
}
};
</script>
<style scoped>
.sidebar{
display: block;
position: absolute;
left: 0;
top: 70px;
bottom:0;
overflow-y: scroll;
}
.sidebar::-webkit-scrollbar{
width: 0;
}
.sidebar-el-menu:not(.el-menu--collapse){
width: 250px;
}
.sidebar > ul {
height:100%;
}
.sidebar {
display: block;
position: absolute;
left: 0;
top: 70px;
bottom: 0;
overflow-y: scroll;
}
.sidebar::-webkit-scrollbar {
width: 0;
}
.sidebar-el-menu:not(.el-menu--collapse) {
width: 250px;
}
.sidebar > ul {
height: 100%;
}
</style>
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或