perf[Sidebar]: use sass variables in vue template

This commit is contained in:
Pan 2019-01-29 18:00:59 +08:00
parent 9daeb1cb34
commit 727c1a45dd
2 changed files with 19 additions and 3 deletions

View file

@ -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;
}

View file

@ -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
}