perf[Sidebar]: use sass variables in vue template
This commit is contained in:
parent
6363eb627d
commit
ce35a6f744
|
@ -12,4 +12,16 @@ $panGreen: #30B08F;
|
||||||
$menuBg:#304156;
|
$menuBg:#304156;
|
||||||
$subMenuBg:#1f2d3d;
|
$subMenuBg:#1f2d3d;
|
||||||
$menuHover:#001528;
|
$menuHover:#001528;
|
||||||
|
$menuText:#bfcbd9;
|
||||||
|
$menuActiveText:#409EFF;
|
||||||
$sideBarWidth: 180px;
|
$sideBarWidth: 180px;
|
||||||
|
|
||||||
|
// the :export directive is the magic sauce for webpack
|
||||||
|
:export {
|
||||||
|
menuBg: $menuBg;
|
||||||
|
subMenuBg: $subMenuBg;
|
||||||
|
menuHover: $menuHover;
|
||||||
|
menuText:$menuText;
|
||||||
|
menuActiveText:$menuActiveText;
|
||||||
|
sideBarWidth: $sideBarWidth;
|
||||||
|
}
|
||||||
|
|
|
@ -4,10 +4,10 @@
|
||||||
:show-timeout="200"
|
:show-timeout="200"
|
||||||
:default-active="$route.path"
|
:default-active="$route.path"
|
||||||
:collapse="isCollapse"
|
:collapse="isCollapse"
|
||||||
|
:background-color="variables.menuBg"
|
||||||
|
:text-color="variables.menuText"
|
||||||
|
:active-text-color="variables.menuActiveText"
|
||||||
mode="vertical"
|
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"/>
|
<sidebar-item v-for="route in permission_routers" :key="route.path" :item="route" :base-path="route.path"/>
|
||||||
</el-menu>
|
</el-menu>
|
||||||
|
@ -17,6 +17,7 @@
|
||||||
<script>
|
<script>
|
||||||
import { mapGetters } from 'vuex'
|
import { mapGetters } from 'vuex'
|
||||||
import SidebarItem from './SidebarItem'
|
import SidebarItem from './SidebarItem'
|
||||||
|
import variables from '@/styles/variables.scss'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
components: { SidebarItem },
|
components: { SidebarItem },
|
||||||
|
@ -25,6 +26,9 @@ export default {
|
||||||
'permission_routers',
|
'permission_routers',
|
||||||
'sidebar'
|
'sidebar'
|
||||||
]),
|
]),
|
||||||
|
variables() {
|
||||||
|
return variables
|
||||||
|
},
|
||||||
isCollapse() {
|
isCollapse() {
|
||||||
return !this.sidebar.opened
|
return !this.sidebar.opened
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue