mirror of
https://github.com/iczer/vue-antd-admin
synced 2025-04-06 04:00:06 +08:00
feat: complete layout toggle function
This commit is contained in:
iczer
chenghx
parent
db881e57bf
commit
2adbdc8830
@ -1,22 +1,25 @@
|
||||
<template>
|
||||
<a-layout-header :class="[backgroundColor, 'global-header']">
|
||||
<router-link v-if="isMobile" to="/" class="logo">
|
||||
<img width="32" src="static/img/vue-antd-logo.png" />
|
||||
</router-link>
|
||||
<a-divider v-if="isMobile" type="vertical" />
|
||||
<a-icon v-if="layout === 'side'" class="trigger" :type="collapsed ? 'menu-unfold' : 'menu-fold'" @click="toggleCollapse"/>
|
||||
<div v-if="layout === 'head'" class="global-header-menu">
|
||||
<i-menu style="height: 64px; line-height: 64px;" :theme="theme" mode="horizontal" :menuData="menuData" @select="onSelect"/>
|
||||
</div>
|
||||
<div style="float: right">
|
||||
<header-search class="header-item" />
|
||||
<a-tooltip class="header-item" title="帮助文档" placement="bottom" >
|
||||
<a>
|
||||
<a-icon type="question-circle-o" />
|
||||
</a>
|
||||
</a-tooltip>
|
||||
<header-notice class="header-item"/>
|
||||
<header-avatar class="header-item"/>
|
||||
<a-layout-header :class="[theme, 'global-header']">
|
||||
<div :class="['global-header-wide', layout]">
|
||||
<router-link v-if="isMobile || layout === 'head'" to="/" :class="['logo', isMobile ? null : 'pc', theme]">
|
||||
<img width="32" src="static/img/vue-antd-logo.png" />
|
||||
<h1 v-if="!isMobile">Vue Antd Admin</h1>
|
||||
</router-link>
|
||||
<a-divider v-if="isMobile" type="vertical" />
|
||||
<a-icon v-if="layout === 'side'" class="trigger" :type="collapsed ? 'menu-unfold' : 'menu-fold'" @click="toggleCollapse"/>
|
||||
<div v-if="layout === 'head'" class="global-header-menu">
|
||||
<i-menu style="height: 64px; line-height: 64px;" :theme="theme" mode="horizontal" :menuData="menuData" @select="onSelect"/>
|
||||
</div>
|
||||
<div :class="['global-header-right', theme]">
|
||||
<header-search class="header-item" />
|
||||
<a-tooltip class="header-item" title="帮助文档" placement="bottom" >
|
||||
<a>
|
||||
<a-icon type="question-circle-o" />
|
||||
</a>
|
||||
</a-tooltip>
|
||||
<header-notice class="header-item"/>
|
||||
<header-avatar class="header-item"/>
|
||||
</div>
|
||||
</div>
|
||||
</a-layout-header>
|
||||
</template>
|
||||
@ -48,7 +51,7 @@ export default {
|
||||
ALayout,
|
||||
ALayoutSider,
|
||||
ALayoutHeader},
|
||||
props: ['collapsed', 'menuData', 'theme'],
|
||||
props: ['collapsed', 'menuData'],
|
||||
computed: {
|
||||
isMobile () {
|
||||
return this.$store.state.setting.isMobile
|
||||
@ -56,8 +59,8 @@ export default {
|
||||
layout () {
|
||||
return this.$store.state.setting.layout
|
||||
},
|
||||
backgroundColor () {
|
||||
return this.layout === 'side' ? 'light' : this.theme
|
||||
theme () {
|
||||
return this.layout === 'side' ? 'light' : this.$store.state.setting.theme
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
@ -78,12 +81,10 @@ export default {
|
||||
padding: 0 24px;
|
||||
cursor: pointer;
|
||||
transition: color .3s;
|
||||
&:hover{
|
||||
color: #1890ff;
|
||||
}
|
||||
}
|
||||
|
||||
.trigger:hover {
|
||||
color: #1890ff;
|
||||
}
|
||||
|
||||
.header-item{
|
||||
padding: 0 12px;
|
||||
display: inline-block;
|
||||
@ -104,23 +105,50 @@ export default {
|
||||
background: #fff;
|
||||
}
|
||||
&.dark{
|
||||
background-color: #001529;
|
||||
background: #001529;
|
||||
}
|
||||
.logo {
|
||||
height: 64px;
|
||||
line-height: 58px;
|
||||
vertical-align: top;
|
||||
display: inline-block;
|
||||
padding: 0 12px 0 24px;
|
||||
cursor: pointer;
|
||||
font-size: 20px;
|
||||
img {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
.global-header-wide{
|
||||
&.head{
|
||||
max-width: 1200px;
|
||||
margin: auto;
|
||||
}
|
||||
&.side{
|
||||
}
|
||||
.logo {
|
||||
height: 64px;
|
||||
line-height: 58px;
|
||||
vertical-align: top;
|
||||
display: inline-block;
|
||||
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>
|
||||
|
||||
@ -11,7 +11,7 @@
|
||||
<setting />
|
||||
</drawer>
|
||||
<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'}">
|
||||
<slot></slot>
|
||||
</a-layout-content>
|
||||
|
||||
@ -33,7 +33,7 @@
|
||||
</template>
|
||||
<span @click="fetchNotice" class="header-notice">
|
||||
<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>
|
||||
</span>
|
||||
</a-popover>
|
||||
@ -60,6 +60,11 @@ export default {
|
||||
loadding: false
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
theme () {
|
||||
return this.$store.state.setting.layout === 'side' ? 'light' : this.$store.state.setting.theme
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
fetchNotice () {
|
||||
if (this.loadding) {
|
||||
@ -79,9 +84,17 @@ export default {
|
||||
.header-notice{
|
||||
display: inline-block;
|
||||
transition: all 0.3s;
|
||||
& :global{
|
||||
span {
|
||||
vertical-align: initial;
|
||||
span {
|
||||
vertical-align: initial;
|
||||
}
|
||||
.header-notice-icon{
|
||||
font-size: 16px;
|
||||
padding: 4px;
|
||||
&.dark{
|
||||
color: #fff;
|
||||
}
|
||||
&.light{
|
||||
color: rgba(0,0,0,.65);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -13,7 +13,7 @@
|
||||
</div>
|
||||
<slot slot="extra" name="extra"></slot>
|
||||
</page-header>
|
||||
<div ref="page" style="margin: 24px 24px 0px">
|
||||
<div ref="page" :class="['page-content', layout]" >
|
||||
<slot ></slot>
|
||||
</div>
|
||||
</div>
|
||||
@ -31,6 +31,11 @@ export default {
|
||||
breadcrumb: []
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
layout () {
|
||||
return this.$store.state.setting.layout
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
this.getBreadcrumb()
|
||||
},
|
||||
@ -58,5 +63,13 @@ export default {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.page-content{
|
||||
&.side{
|
||||
margin: 24px 24px 0px;
|
||||
}
|
||||
&.head{
|
||||
margin: 24px auto 0;
|
||||
max-width: 1200px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,27 +1,28 @@
|
||||
<template>
|
||||
<div class="page-header">
|
||||
<div class="breadcrumb">
|
||||
<a-breadcrumb>
|
||||
<a-breadcrumb-item :key="item.path" v-for="(item, index) in breadcrumb">
|
||||
<span v-if="index === 0"><a href="#/dashboard/workplace">{{item.name}}</a></span>
|
||||
<span v-else>{{item.name}}</span>
|
||||
</a-breadcrumb-item>
|
||||
</a-breadcrumb>
|
||||
</div>
|
||||
<div class="detail">
|
||||
<div v-if="avatar" class="avatar"><a-avatar :src="avatar" /></div>
|
||||
<div class="main">
|
||||
<div class="row">
|
||||
<img v-if="logo" :src="logo" class="logo" />
|
||||
<h1 v-if="title" class="title">{{title}}</h1>
|
||||
<div class="action"><slot name="action"></slot></div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<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 :class="['page-header-wide', layout]">
|
||||
<div class="breadcrumb">
|
||||
<a-breadcrumb>
|
||||
<a-breadcrumb-item :key="item.path" v-for="(item, index) in breadcrumb">
|
||||
<span v-if="index === 0"><a href="#/dashboard/workplace">{{item.name}}</a></span>
|
||||
<span v-else>{{item.name}}</span>
|
||||
</a-breadcrumb-item>
|
||||
</a-breadcrumb>
|
||||
</div>
|
||||
<div class="detail">
|
||||
<div v-if="avatar" class="avatar"><a-avatar :src="avatar" /></div>
|
||||
<div class="main">
|
||||
<div class="row">
|
||||
<img v-if="logo" :src="logo" class="logo" />
|
||||
<h1 v-if="title" class="title">{{title}}</h1>
|
||||
<div class="action"><slot name="action"></slot></div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<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>
|
||||
</template>
|
||||
@ -51,6 +52,11 @@ export default {
|
||||
type: String,
|
||||
required: false
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
layout () {
|
||||
return this.$store.state.setting.layout
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@ -60,56 +66,64 @@ export default {
|
||||
background: #fff;
|
||||
padding: 16px 32px 0;
|
||||
border-bottom: 1px solid #e8e8e8;
|
||||
.breadcrumb{
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
.detail{
|
||||
display: flex;
|
||||
.row {
|
||||
.page-header-wide{
|
||||
&.head{
|
||||
margin: auto;
|
||||
max-width: 1200px;
|
||||
}
|
||||
&.side{
|
||||
}
|
||||
.breadcrumb{
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
.detail{
|
||||
display: flex;
|
||||
width: 100%;
|
||||
}
|
||||
.avatar {
|
||||
flex: 0 1 72px;
|
||||
margin:0 24px 8px 0;
|
||||
& > span {
|
||||
border-radius: 72px;
|
||||
display: block;
|
||||
width: 72px;
|
||||
height: 72px;
|
||||
.row {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
.main{
|
||||
width: 100%;
|
||||
flex: 0 1 auto;
|
||||
.title{
|
||||
flex: auto;
|
||||
font-size: 20px;
|
||||
font-weight: 500;
|
||||
color: rgba(0,0,0,.85);
|
||||
margin-bottom: 16px;
|
||||
.avatar {
|
||||
flex: 0 1 72px;
|
||||
margin:0 24px 8px 0;
|
||||
& > span {
|
||||
border-radius: 72px;
|
||||
display: block;
|
||||
width: 72px;
|
||||
height: 72px;
|
||||
}
|
||||
}
|
||||
.logo{
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
border-radius: 4px;
|
||||
margin-right: 16px;
|
||||
}
|
||||
.content{
|
||||
margin-bottom: 16px;
|
||||
flex: auto;
|
||||
}
|
||||
.extra{
|
||||
.main{
|
||||
width: 100%;
|
||||
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;
|
||||
.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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user