# 全局的組件如何使用 ``` <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可以切換菜單