caoliancun
/
vue-antd-admin-skeleton
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: complete layout toggle function

Browse Source
master
iczer 7 years ago committed by chenghx
parent db881e57bf
commit 2adbdc8830
5 changed files with 180 additions and 112 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 108
      src/components/layout/GlobalHeader.vue
  2. 2
      src/components/layout/GlobalLayout.vue
  3. 21
      src/components/layout/HeaderNotice.vue
  4. 17
      src/components/layout/PageLayout.vue
  5. 144
      src/components/page/PageHeader.vue

108
src/components/layout/GlobalHeader.vue
Unescape View File

@ -1,22 +1,25 @@
<template> <template>
<a-layout-header :class="[backgroundColor, 'global-header']"> <a-layout-header :class="[theme, 'global-header']">
<router-link v-if="isMobile" to="/" class="logo"> <div :class="['global-header-wide', layout]">
<img width="32" src="static/img/vue-antd-logo.png" /> <router-link v-if="isMobile || layout === 'head'" to="/" :class="['logo', isMobile ? null : 'pc', theme]">
</router-link> <img width="32" src="static/img/vue-antd-logo.png" />
<a-divider v-if="isMobile" type="vertical" /> <h1 v-if="!isMobile">Vue Antd Admin</h1>
<a-icon v-if="layout === 'side'" class="trigger" :type="collapsed ? 'menu-unfold' : 'menu-fold'" @click="toggleCollapse"/> </router-link>
<div v-if="layout === 'head'" class="global-header-menu"> <a-divider v-if="isMobile" type="vertical" />
<i-menu style="height: 64px; line-height: 64px;" :theme="theme" mode="horizontal" :menuData="menuData" @select="onSelect"/> <a-icon v-if="layout === 'side'" class="trigger" :type="collapsed ? 'menu-unfold' : 'menu-fold'" @click="toggleCollapse"/>
</div> <div v-if="layout === 'head'" class="global-header-menu">
<div style="float: right"> <i-menu style="height: 64px; line-height: 64px;" :theme="theme" mode="horizontal" :menuData="menuData" @select="onSelect"/>
<header-search class="header-item" /> </div>
<a-tooltip class="header-item" title="帮助文档" placement="bottom" > <div :class="['global-header-right', theme]">
<a> <header-search class="header-item" />
<a-icon type="question-circle-o" /> <a-tooltip class="header-item" title="帮助文档" placement="bottom" >
</a> <a>
</a-tooltip> <a-icon type="question-circle-o" />
<header-notice class="header-item"/> </a>
<header-avatar class="header-item"/> </a-tooltip>
<header-notice class="header-item"/>
<header-avatar class="header-item"/>
</div>
</div> </div>
</a-layout-header> </a-layout-header>
</template> </template>
@ -48,7 +51,7 @@ export default {
ALayout, ALayout,
ALayoutSider, ALayoutSider,
ALayoutHeader}, ALayoutHeader},
props: ['collapsed', 'menuData', 'theme'], props: ['collapsed', 'menuData'],
computed: { computed: {
isMobile () { isMobile () {
return this.$store.state.setting.isMobile return this.$store.state.setting.isMobile
@ -56,8 +59,8 @@ export default {
layout () { layout () {
return this.$store.state.setting.layout return this.$store.state.setting.layout
}, },
backgroundColor () { theme () {
return this.layout === 'side' ? 'light' : this.theme return this.layout === 'side' ? 'light' : this.$store.state.setting.theme
} }
}, },
methods: { methods: {
@ -78,12 +81,10 @@ export default {
padding: 0 24px; padding: 0 24px;
cursor: pointer; cursor: pointer;
transition: color .3s; transition: color .3s;
&:hover{
color: #1890ff;
}
} }
.trigger:hover {
color: #1890ff;
}
.header-item{ .header-item{
padding: 0 12px; padding: 0 12px;
display: inline-block; display: inline-block;
@ -104,23 +105,50 @@ export default {
background: #fff; background: #fff;
} }
&.dark{ &.dark{
background-color: #001529; background: #001529;
} }
.logo { .global-header-wide{
height: 64px; &.head{
line-height: 58px; max-width: 1200px;
vertical-align: top; margin: auto;
display: inline-block; }
padding: 0 12px 0 24px; &.side{
cursor: pointer; }
font-size: 20px; .logo {
img { height: 64px;
line-height: 58px;
vertical-align: top;
display: inline-block; display: inline-block;
vertical-align: middle; padding: 0 12px 0 24px;
cursor: pointer;
font-size: 20px;
&.pc{
padding: 0 12px 0 0;
}
img {
display: inline-block;
vertical-align: middle;
}
h1{
display: inline-block;
font-size: 16px;
}
&.dark h1{
color: #fff;
}
}
.global-header-menu{
display: inline-block;
}
.global-header-right{
float: right;
&.dark{
color: #fff;
i{
color: #fff;
}
}
} }
}
.global-header-menu{
display: inline-block;
} }
} }
</style> </style>

2
src/components/layout/GlobalLayout.vue
Unescape View File

@ -11,7 +11,7 @@
<setting /> <setting />
</drawer> </drawer>
<a-layout> <a-layout>
<global-header :menuData="menuData" :theme="theme" :collapsed="collapsed" @toggleCollapse="toggleCollapse"/> <global-header :menuData="menuData" :collapsed="collapsed" @toggleCollapse="toggleCollapse"/>
<a-layout-content :style="{minHeight: minHeight, margin: '24px 24px 0'}"> <a-layout-content :style="{minHeight: minHeight, margin: '24px 24px 0'}">
<slot></slot> <slot></slot>
</a-layout-content> </a-layout-content>

21
src/components/layout/HeaderNotice.vue
Unescape View File

@ -33,7 +33,7 @@
</template> </template>
<span @click="fetchNotice" class="header-notice"> <span @click="fetchNotice" class="header-notice">
<a-badge count="12"> <a-badge count="12">
<a-icon style="font-size: 16px; padding: 4px" type="bell" /> <a-icon :class="['header-notice-icon', theme]" type="bell" />
</a-badge> </a-badge>
</span> </span>
</a-popover> </a-popover>
@ -60,6 +60,11 @@ export default {
loadding: false loadding: false
} }
}, },
computed: {
theme () {
return this.$store.state.setting.layout === 'side' ? 'light' : this.$store.state.setting.theme
}
},
methods: { methods: {
fetchNotice () { fetchNotice () {
if (this.loadding) { if (this.loadding) {
@ -79,9 +84,17 @@ export default {
.header-notice{ .header-notice{
display: inline-block; display: inline-block;
transition: all 0.3s; transition: all 0.3s;
& :global{ span {
span { vertical-align: initial;
vertical-align: initial; }
.header-notice-icon{
font-size: 16px;
padding: 4px;
&.dark{
color: #fff;
}
&.light{
color: rgba(0,0,0,.65);
} }
} }
} }

17
src/components/layout/PageLayout.vue
Unescape View File

@ -13,7 +13,7 @@
</div> </div>
<slot slot="extra" name="extra"></slot> <slot slot="extra" name="extra"></slot>
</page-header> </page-header>
<div ref="page" style="margin: 24px 24px 0px"> <div ref="page" :class="['page-content', layout]" >
<slot ></slot> <slot ></slot>
</div> </div>
</div> </div>
@ -31,6 +31,11 @@ export default {
breadcrumb: [] breadcrumb: []
} }
}, },
computed: {
layout () {
return this.$store.state.setting.layout
}
},
mounted () { mounted () {
this.getBreadcrumb() this.getBreadcrumb()
}, },
@ -58,5 +63,13 @@ export default {
} }
} }
} }
.page-content{
&.side{
margin: 24px 24px 0px;
}
&.head{
margin: 24px auto 0;
max-width: 1200px;
}
}
</style> </style>

144
src/components/page/PageHeader.vue
Unescape View File

@ -1,27 +1,28 @@
<template> <template>
<div class="page-header"> <div class="page-header">
<div class="breadcrumb"> <div :class="['page-header-wide', layout]">
<a-breadcrumb> <div class="breadcrumb">
<a-breadcrumb-item :key="item.path" v-for="(item, index) in breadcrumb"> <a-breadcrumb>
<span v-if="index === 0"><a href="#/dashboard/workplace">{{item.name}}</a></span> <a-breadcrumb-item :key="item.path" v-for="(item, index) in breadcrumb">
<span v-else>{{item.name}}</span> <span v-if="index === 0"><a href="#/dashboard/workplace">{{item.name}}</a></span>
</a-breadcrumb-item> <span v-else>{{item.name}}</span>
</a-breadcrumb> </a-breadcrumb-item>
</div> </a-breadcrumb>
<div class="detail"> </div>
<div v-if="avatar" class="avatar"><a-avatar :src="avatar" /></div> <div class="detail">
<div class="main"> <div v-if="avatar" class="avatar"><a-avatar :src="avatar" /></div>
<div class="row"> <div class="main">
<img v-if="logo" :src="logo" class="logo" /> <div class="row">
<h1 v-if="title" class="title">{{title}}</h1> <img v-if="logo" :src="logo" class="logo" />
<div class="action"><slot name="action"></slot></div> <h1 v-if="title" class="title">{{title}}</h1>
</div> <div class="action"><slot name="action"></slot></div>
<div class="row"> </div>
<div v-if="this.$slots.content" class="content"><slot name="content"></slot></div> <div class="row">
<div v-if="this.$slots.extra" class="extra"><slot name="extra"></slot></div> <div v-if="this.$slots.content" class="content"><slot name="content"></slot></div>
<div v-if="this.$slots.extra" class="extra"><slot name="extra"></slot></div>
</div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</template> </template>
@ -51,6 +52,11 @@ export default {
type: String, type: String,
required: false required: false
} }
},
computed: {
layout () {
return this.$store.state.setting.layout
}
} }
} }
</script> </script>
@ -60,56 +66,64 @@ export default {
background: #fff; background: #fff;
padding: 16px 32px 0; padding: 16px 32px 0;
border-bottom: 1px solid #e8e8e8; border-bottom: 1px solid #e8e8e8;
.breadcrumb{ .page-header-wide{
margin-bottom: 16px; &.head{
} margin: auto;
.detail{ max-width: 1200px;
display: flex;
.row {
display: flex;
width: 100%;
} }
.avatar { &.side{
flex: 0 1 72px;
margin:0 24px 8px 0;
& > span {
border-radius: 72px;
display: block;
width: 72px;
height: 72px;
}
} }
.main{ .breadcrumb{
width: 100%; margin-bottom: 16px;
flex: 0 1 auto; }
.title{ .detail{
flex: auto; display: flex;
font-size: 20px; .row {
font-weight: 500; display: flex;
color: rgba(0,0,0,.85); width: 100%;
margin-bottom: 16px;
}
.logo{
width: 28px;
height: 28px;
border-radius: 4px;
margin-right: 16px;
}
.content{
margin-bottom: 16px;
flex: auto;
} }
.extra{ .avatar {
flex: 0 1 auto; flex: 0 1 72px;
margin-left: 88px; margin:0 24px 8px 0;
min-width: 242px; & > span {
text-align: right; border-radius: 72px;
display: block;
width: 72px;
height: 72px;
}
} }
.action{ .main{
margin-left: 56px; width: 100%;
min-width: 266px;
flex: 0 1 auto; flex: 0 1 auto;
text-align: right; .title{
flex: auto;
font-size: 20px;
font-weight: 500;
color: rgba(0,0,0,.85);
margin-bottom: 16px;
}
.logo{
width: 28px;
height: 28px;
border-radius: 4px;
margin-right: 16px;
}
.content{
margin-bottom: 16px;
flex: auto;
}
.extra{
flex: 0 1 auto;
margin-left: 88px;
min-width: 242px;
text-align: right;
}
.action{
margin-left: 56px;
min-width: 266px;
flex: 0 1 auto;
text-align: right;
}
} }
} }
} }

Write Preview
Loading…
Cancel
Save