From 727c1a45dd15bd668cfe584a2af8b5b0a9cd28ec Mon Sep 17 00:00:00 2001
From: Pan <panfree23@gmail.com>
Date: Tue, 29 Jan 2019 18:00:59 +0800
Subject: [PATCH] perf[Sidebar]: use sass variables in vue template
---
src/styles/variables.scss | 12 ++++++++++++
src/views/layout/components/Sidebar/index.vue | 10 +++++++---
2 files changed, 19 insertions(+), 3 deletions(-)
diff --git a/src/styles/variables.scss b/src/styles/variables.scss
index 09c3e9b0..87a5dd50 100644
--- a/src/styles/variables.scss
+++ b/src/styles/variables.scss
@@ -12,4 +12,16 @@ $panGreen: #30B08F;
$menuBg:#304156;
$subMenuBg:#1f2d3d;
$menuHover:#001528;
+$menuText:#bfcbd9;
+$menuActiveText:#409EFF;
$sideBarWidth: 180px;
+
+// the :export directive is the magic sauce for webpack
+:export {
+ menuBg: $menuBg;
+ subMenuBg: $subMenuBg;
+ menuHover: $menuHover;
+ menuText:$menuText;
+ menuActiveText:$menuActiveText;
+ sideBarWidth: $sideBarWidth;
+}
diff --git a/src/views/layout/components/Sidebar/index.vue b/src/views/layout/components/Sidebar/index.vue
index dff85f18..48407286 100644
--- a/src/views/layout/components/Sidebar/index.vue
+++ b/src/views/layout/components/Sidebar/index.vue
@@ -4,10 +4,10 @@
:show-timeout="200"
:default-active="$route.path"
:collapse="isCollapse"
+ :background-color="variables.menuBg"
+ :text-color="variables.menuText"
+ :active-text-color="variables.menuActiveText"
mode="vertical"
- background-color="#304156"
- text-color="#bfcbd9"
- active-text-color="#409EFF"
>
<sidebar-item v-for="route in permission_routers" :key="route.path" :item="route" :base-path="route.path"/>
</el-menu>
@@ -17,6 +17,7 @@
<script>
import { mapGetters } from 'vuex'
import SidebarItem from './SidebarItem'
+import variables from '@/styles/variables.scss'
export default {
components: { SidebarItem },
@@ -25,6 +26,9 @@ export default {
'permission_routers',
'sidebar'
]),
+ variables() {
+ return variables
+ },
isCollapse() {
return !this.sidebar.opened
}