feat: add layout toggle

master
chenghx 7 years ago
parent 1488821833
commit db881e57bf
  1. 30
      src/components/layout/GlobalHeader.vue
  2. 7
      src/components/layout/GlobalLayout.vue
  3. 6
      src/components/menu/SiderMenu.vue
  4. 1
      src/components/menu/menu.js
  5. 22
      src/components/setting/Setting.vue
  6. 6
      src/store/modules/setting.js

@ -1,10 +1,13 @@
<template>
<a-layout-header class="global-header">
<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 class="trigger" :type="collapsed ? 'menu-unfold' : 'menu-fold'" @click="toggleCollapse"/>
<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" >
@ -27,12 +30,14 @@ import HeaderNotice from './HeaderNotice'
import ATooltip from 'ant-design-vue/es/tooltip/Tooltip'
import HeaderAvatar from './HeaderlAvatar'
import ADivider from 'ant-design-vue/es/divider/index'
import IMenu from '../menu/menu'
const ALayoutSider = ALayout.Sider
const ALayoutHeader = ALayout.Header
export default {
name: 'GlobalHeader',
components: {
IMenu,
ADivider,
HeaderAvatar,
ATooltip,
@ -43,15 +48,24 @@ export default {
ALayout,
ALayoutSider,
ALayoutHeader},
props: ['collapsed'],
props: ['collapsed', 'menuData', 'theme'],
computed: {
isMobile () {
return this.$store.state.setting.isMobile
},
layout () {
return this.$store.state.setting.layout
},
backgroundColor () {
return this.layout === 'side' ? 'light' : this.theme
}
},
methods: {
toggleCollapse () {
this.$emit('toggleCollapse')
},
onSelect (obj) {
this.$emit('menuSelect', obj)
}
}
}
@ -82,11 +96,16 @@ export default {
}
}
.global-header{
background: #fff;
padding: 0 12px 0 0;
-webkit-box-shadow: 0 1px 4px rgba(0,21,41,.08);
box-shadow: 0 1px 4px rgba(0,21,41,.08);
position: relative;
&.light{
background: #fff;
}
&.dark{
background-color: #001529;
}
.logo {
height: 64px;
line-height: 58px;
@ -100,5 +119,8 @@ export default {
vertical-align: middle;
}
}
.global-header-menu{
display: inline-block;
}
}
</style>

@ -3,7 +3,7 @@
<drawer v-if="isMobile" :openDrawer="collapsed" @change="onDrawerChange">
<sider-menu :theme="theme" :menuData="menuData" :collapsed="false" :collapsible="false" @menuSelect="onMenuSelect"/>
</drawer>
<sider-menu :theme="theme" v-else :menuData="menuData" :collapsed="collapsed" :collapsible="true" />
<sider-menu :theme="theme" v-else-if="layout === 'side'" :menuData="menuData" :collapsed="collapsed" :collapsible="true" />
<drawer :open-drawer="showSetting" placement="right" @change="onSettingDrawerChange">
<div class="setting" slot="handler">
<a-icon :type="showSetting ? 'close' : 'setting'" />
@ -11,7 +11,7 @@
<setting />
</drawer>
<a-layout>
<global-header :collapsed="collapsed" @toggleCollapse="toggleCollapse"/>
<global-header :menuData="menuData" :theme="theme" :collapsed="collapsed" @toggleCollapse="toggleCollapse"/>
<a-layout-content :style="{minHeight: minHeight, margin: '24px 24px 0'}">
<slot></slot>
</a-layout-content>
@ -69,6 +69,9 @@ export default {
},
theme () {
return this.$store.state.setting.theme
},
layout () {
return this.$store.state.setting.layout
}
},
methods: {

@ -51,12 +51,6 @@ export default {
</script>
<style lang="less" scoped>
.dark{
background-color: #002140;
}
.light{
background-color: #fff;
}
.shadow{
box-shadow: 2px 0 6px rgba(0,21,41,.35);
}

@ -166,7 +166,6 @@ export default {
props: {
theme: this.$props.theme,
mode: this.$props.mode,
inlineCollapsed: false,
openKeys: this.openKeys,
selectedKeys: this.selectedKeys
},

@ -1,9 +1,9 @@
<template>
<a-layout-sider class="sider" width="273">
<setting-item title="整体风格设置">
<img-check-box-group @change="onStyleChange">
<img-check-box img="https://gw.alipayobjects.com/zos/rmsportal/LCkqqYNmvBEbokSDscrm.svg" :checked="true" :value="{value: 1, name: 'dark'}"/>
<img-check-box img="https://gw.alipayobjects.com/zos/rmsportal/jpRkZQMyYRryryPNtyIC.svg" :value="{value: 2, name: 'light'}"/>
<img-check-box-group @change="setTheme">
<img-check-box img="https://gw.alipayobjects.com/zos/rmsportal/LCkqqYNmvBEbokSDscrm.svg" :checked="true" value="dark"/>
<img-check-box img="https://gw.alipayobjects.com/zos/rmsportal/jpRkZQMyYRryryPNtyIC.svg" value="light"/>
</img-check-box-group>
</setting-item>
<setting-item title="主题色">
@ -20,9 +20,9 @@
</setting-item>
<a-divider/>
<setting-item title="导航设置">
<img-check-box-group @change="onNaviChange">
<img-check-box img="https://gw.alipayobjects.com/zos/rmsportal/JopDzEhOqwOjeNTXkoje.svg" :checked="true" :value="{value: 1, name: 'Side Navigation'}"/>
<img-check-box img="https://gw.alipayobjects.com/zos/rmsportal/KDNDBbriJhLwuqMoxcAr.svg" :value="{value: 2, name: 'Top Navigation'}"/>
<img-check-box-group @change="setLayout">
<img-check-box img="https://gw.alipayobjects.com/zos/rmsportal/JopDzEhOqwOjeNTXkoje.svg" :checked="true" value="side"/>
<img-check-box img="https://gw.alipayobjects.com/zos/rmsportal/KDNDBbriJhLwuqMoxcAr.svg" value="head"/>
</img-check-box-group>
</setting-item>
<setting-item>
@ -105,13 +105,11 @@ export default {
this.$message.info(`您选择了主题色 ${colors}`)
}
},
onStyleChange (values) {
this.$store.commit('setting/setTheme', values[0].name)
setTheme (values) {
this.$store.commit('setting/setTheme', values[0])
},
onNaviChange (values) {
if (values.length > 0) {
this.$message.info(`您选择了 ${values[0].name} `)
}
setLayout (values) {
this.$store.commit('setting/setLayout', values[0])
},
copyCode () {
let clipboard = new Clipboard('#copyBtn')

@ -2,7 +2,8 @@ export default {
namespaced: true,
state: {
isMobile: false,
theme: 'dark'
theme: 'dark',
layout: 'side'
},
mutations: {
setDevice (state, isMobile) {
@ -10,6 +11,9 @@ export default {
},
setTheme (state, theme) {
state.theme = theme
},
setLayout (state, layout) {
state.layout = layout
}
}
}

Loading…
Cancel
Save