# 全局的组件如何使用 ``` <main-theme2 ref="mainTheme" :headerTextStyle="headerTextStyle" systemName="切换系统" > <router-view></router-view> </main-theme2> ``` ### mainTheme1 props | 属性 | 说明 | 类型 | 默认值 | | --- | --- | --- | --- | | logoPath | 头部背景图| String | default | | siderWidth | 左侧菜单的宽度 | Number | 200 | | headerTextStyle| 显示header文字信息 | Object| { text: '沈阳市行权治理（监督）平台', lineWidth: '550px' }| | systemName| 切换菜单显示名 | String | 系统切换| ### mainTheme1 slot | 名称 | 说明 | | --- | --- | |headerLine| 头部下面的div，可以自定义样式| ### 如果需要更改菜单颜色，请覆盖下面的样式 ``` //---下面的是这是菜单的颜色 .layout /deep/ .ivu-menu { color: black; } .layout /deep/ .ivu-layout-sider-trigger { background-color: #2f4a8d; } .layout /deep/ .ivu-menu-child-item-active { background-color: #ffffff; color: black; } .layout /deep/ .ivu-menu-child-item-active ul li, .layout /deep/ .ivu-menu-child-item-active ul a { color: black; } .layout /deep/ .ivu-menu-light.ivu-menu-vertical .ivu-menu-item-active:not(.ivu-menu-submenu) { background-color: #2f4a8d; color: white; } .layout /deep/ .ivu-menu-item:hover, .layout /deep/ .ivu-menu-submenu:hover { color: #000037; border-bottom: 0px solid #2f4a8d } .layout /deep/ .ivu-menu-vertical .ivu-menu-item:hover, .layout /deep/ .ivu-menu-vertical .ivu-menu-submenu-title:hover { color: #2f4a8d } ``` ### 特殊说明 ``` this.$refs.mainTheme.logout() ``` 说明：退出按钮可以用上边的方法 > /sys/update-password 修改密码可以用这个路由 ***** > headerMenus () { return this.$store.state.app.menuHeaderListData } 计算属性里面添加此方法可以获取一级菜单数据。this.$refs.mainTheme.topMenuSelect(id) 调用此方法传递一级菜单的parent_ids可以切换菜单