阿克苏地区住房和城乡建设局网站,网页游戏直接玩,wordpress 雷锋模板,wordpress文章地图定位前景提要#xff1a;要求不同权限账号登录侧边栏颜色不一样。分为 theme#xff1a;1代表默认样式#xff0c;theme:2代表深色主题样式。 1.首先定义一个主题文件 theme.js#xff0c;定义两个主题样式
// 主要是切换菜单栏和菜单头部主题的设计#xff0c;整体主题样式切…前景提要要求不同权限账号登录侧边栏颜色不一样。分为 theme1代表默认样式theme:2代表深色主题样式。 1.首先定义一个主题文件 theme.js定义两个主题样式
// 主要是切换菜单栏和菜单头部主题的设计整体主题样式切换是否能匹配
export const _Theme {lightTheme: {// 默认主题样式要和varibles.scss的变量参数属性一样theme为1menuBg: #ffffff,menuText: #464646,subMenuActiveText: #464646,menu: #F7FCFF},darkTheme: {// 深色主题theme为2menuBg: #2781AB,menuText: #BDCBD9,subMenuActiveText: #ffffff,menu: #106E9A}
}
2.在 App.vue 里获取上边的 js 文件的主题 App.vue
templatediv idapprouter-view //div
/templatescript
import { _Theme } from ./theme.js
export default {name: App,computed: {nowTheme: {get() {return this.$store.state.user.user.theme}}},watch: {// 主题切换nowTheme() {if (this.nowTheme 2) {this.changeStyle(_Theme.darkTheme)} else {this.changeStyle(_Theme.lightTheme)}}},methods: {//主要代码changeStyle(obj) {for (const key in obj) {document.getElementsByTagName(body)[0].style.setProperty(--${key}, obj[key])}}}}
/script
侧边栏文件index.vue:javascript
templateel-scrollbar wrap-classscrollbar-wrapperel-menu:default-activeactiveMenu:collapseisCollapse:background-colorvariablesa.menuBg:text-colorvariablesa.menuText:unique-opened$store.state.settings.uniqueOpened:active-text-colorvariablesa.menuActiveText:collapse-transitionfalsemodeverticalsidebar-itemv-forroute in sidebarRouters:keyroute.path:itemroute:base-pathroute.path//el-menu/el-scrollbar
/templatescript
import SidebarItem from ./SidebarItem
import variables from /assets/styles/variables.scss //主要代码export default {computed: {variablesa() {return variables}}
}
/script
侧边栏样式表variables.scss:
// sidebar
$menuText:var(--menuText,#464646);$menuActiveText:var(--menuActiveText,$--color-theme);
$subMenuActiveText:var(--subMenuActiveText,#464646);$menuBg:var(--menuBg,#ffffff);//侧边栏菜单主题色$menuTopBg:transparent;//顶栏菜单主题色
$menuHover:var(--menu,#F7FCFF);
$subMenuBg:var(--menu,#F7FCFF);
$subMenuHover:var(--menu,#F7FCFF);$sideBarWidth: 260px;
:export {menuText: $menuText;menuActiveText: $menuActiveText;subMenuActiveText: $subMenuActiveText;menuBg: $menuBg;menuTopBg: $menuTopBg;menuHover: $menuHover;subMenuBg: $subMenuBg;subMenuHover: $subMenuHover;sideBarWidth: $sideBarWidth;
}展示结果
