blackteay/vue-antd-admin
1
0
Fork 0
mirror of https://github.com/iczer/vue-antd-admin synced 2025-04-06 04:00:06 +08:00
Code Issues Projects Releases Wiki Activity

新增：固定 Sider/侧边栏 功能；

Browse Source
This commit is contained in:
iczer 2020-06-21 17:11:21 +08:00
parent 6ef4680adb
commit 9072bc93d7
6 changed files with 38 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
public/index.html
View File

@ -7,7 +7,7 @@
<link rel="icon" href="<%= BASE_URL %>favicon.ico"> <link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title><%= htmlWebpackPlugin.options.title %></title> <title><%= htmlWebpackPlugin.options.title %></title>
</head> </head>
<body> <body class="beauty-scroll">
<noscript> <noscript>
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong> <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript> </noscript>

7
src/components/setting/Setting.vue
View File

@ -33,7 +33,7 @@
</a-list-item> </a-list-item>
<a-list-item> <a-list-item>
固定Siderbar 固定Siderbar
<a-switch slot="actions" size="small" /> <a-switch :checked="fixedSider" slot="actions" size="small" @change="setFixedSider" />
</a-list-item> </a-list-item>
</a-list> </a-list>
</setting-item> </setting-item>
@ -114,7 +114,7 @@ export default {
directions() { directions() {
return this.animates.find(item => item.name == this.animate).directions return this.animates.find(item => item.name == this.animate).directions
}, },
...mapState('setting', ['animates', 'multiPage', 'weekMode', 'fixedHeader']) ...mapState('setting', ['animates', 'multiPage', 'weekMode', 'fixedHeader', 'fixedSider'])
}, },
methods: { methods: {
onColorChange (values, colors) { onColorChange (values, colors) {
@ -156,6 +156,9 @@ export default {
}, },
setFixedHeader(checked) { setFixedHeader(checked) {
this.$store.commit('setting/setFixedHeader', checked) this.$store.commit('setting/setFixedHeader', checked)
},
setFixedSider(checked) {
this.$store.commit('setting/setFixedSider', checked)
} }
} }
} }

1
src/config/index.js
View File

@ -4,6 +4,7 @@ module.exports = {
theme: 'dark', theme: 'dark',
layout: 'side', layout: 'side',
fixedHeader: false, fixedHeader: false,
fixedSider: true,
weekMode: false, weekMode: false,
multiPage: false, multiPage: false,
systemName: 'Vue Antd Admin', systemName: 'Vue Antd Admin',

31
src/layouts/GlobalLayout.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<a-layout class="global-layout"> <a-layout :class="['global-layout', fixedSider ? 'fixed-sider' : '']">
<drawer v-if="isMobile" :openDrawer="collapsed" @change="onDrawerChange"> <drawer v-if="isMobile" :openDrawer="collapsed" @change="onDrawerChange">
<sider-menu :theme="theme" :menuData="menuData" :collapsed="false" :collapsible="false" @menuSelect="onMenuSelect"/> <sider-menu :theme="theme" :menuData="menuData" :collapsed="false" :collapsible="false" @menuSelect="onMenuSelect"/>
</drawer> </drawer>
@ -10,7 +10,7 @@
</div> </div>
<setting /> <setting />
</drawer> </drawer>
<a-layout class="global-layout-main"> <a-layout class="global-layout-main beauty-scroll">
<global-header :style="headerStyle" :menuData="menuData" :collapsed="collapsed" @toggleCollapse="toggleCollapse"/> <global-header :style="headerStyle" :menuData="menuData" :collapsed="collapsed" @toggleCollapse="toggleCollapse"/>
<a-layout-header v-if="fixedHeader"></a-layout-header> <a-layout-header v-if="fixedHeader"></a-layout-header>
<a-layout-content class="global-layout-content"> <a-layout-content class="global-layout-content">
@ -54,7 +54,7 @@ export default {
} }
}, },
computed: { computed: {
...mapState('setting', ['isMobile', 'theme', 'layout', 'footerLinks', 'copyright', 'fixedHeader']), ...mapState('setting', ['isMobile', 'theme', 'layout', 'footerLinks', 'copyright', 'fixedHeader', 'fixedSider']),
sideMenuWidth() { sideMenuWidth() {
return this.collapsed ? '80px' : '256px' return this.collapsed ? '80px' : '256px'
}, },
@ -87,26 +87,13 @@ export default {
<style lang="less" scoped> <style lang="less" scoped>
.global-layout{ .global-layout{
height: 100vh; &.fixed-sider{
height: 100vh;
.global-layout-main{
overflow: scroll;
}
}
.global-layout-main{ .global-layout-main{
overflow: scroll;
scrollbar-color: @primary-color @primary-2;
scrollbar-width: thin;
-ms-overflow-style:none;
position: relative;
&::-webkit-scrollbar{
width: 3px;
height: 1px;
}
&::-webkit-scrollbar-thumb {
border-radius: 3px;
background: @primary;
}
&::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 1px rgba(0,0,0,0);
border-radius: 3px;
background: @primary-3;
}
.global-header{ .global-header{
top: 0; top: 0;
right: 0; right: 0;

3
src/store/modules/setting.js
View File

@ -30,6 +30,9 @@ export default {
}, },
setFixedHeader(state, fixedHeader) { setFixedHeader(state, fixedHeader) {
state.fixedHeader = fixedHeader state.fixedHeader = fixedHeader
},
setFixedSider(state, fixedSider) {
state.fixedSider = fixedSider
} }
} }
} }

19
src/theme/default/style.less
View File

@ -2,3 +2,22 @@
overflow: hidden; overflow: hidden;
filter: invert(80%); filter: invert(80%);
} }
.beauty-scroll{
scrollbar-color: @primary-color @primary-2;
scrollbar-width: thin;
-ms-overflow-style:none;
position: relative;
&::-webkit-scrollbar{
width: 3px;
height: 1px;
}
&::-webkit-scrollbar-thumb {
border-radius: 3px;
background: @primary;
}
&::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 1px rgba(0,0,0,0);
border-radius: 3px;
background: @primary-3;
}
}