登錄后臺，通過添加一個下拉選項【系統設置】來控制系統的后側系統設置，布局如下：
?????1.全局搜索“賬戶設置”，找到對應的vue文件：UserMenu.vue
?????2.添加【系統設置】下拉選項
??????在UserMenu.vue中的“賬戶設置”的代碼
??????<a-menu-item key="1">
??????????<router-link :to="{ name: 'account-settings-base' }">
????????????<a-icon type="setting"/>
????????????<span>賬戶設置</span>
??????????</router-link>
????????</a-menu-item>
??????下面添加代碼：
?????<a-menu-item key="3" ?@click="systemSetting">
?????????<a-icon type="tool"/>
??????????<span>系統設置</span>
??????</a-menu-item>
?? ??? ??? ?3.并將【密碼修改】、【切換部門】的a-menu-item的key分別設置為4、5
?? ??? ??? ?
?? ??? ??? ?4.引入系統設置頁面SettingDrawer.vue
?? ??? ??? ??? ?1）在<depart-select ref="departSelect" :closable="true" title="部門切換"></depart-select>代碼下面
?? ??? ??? ??? ?添加代碼
?? ??? ??? ??? ?<setting-drawer ref="settingDrawer" :closable="true" title="系統設置"></setting-drawer>
?? ??? ??? ??? ?2）import區域添加代碼?import SettingDrawer from "@/components/setting/SettingDrawer";
?? ??? ??? ??? ?3）?components中添加 SettingDrawer
?? ??? ??? ?5.為步驟2中的【系統設置】添加click方法
?? ??? ??? ?在methods中添加
?? ??? ??? ???????systemSetting(){
?? ??? ??? ?????????this.$refs.settingDrawer.showDrawer()
?? ??? ??? ???????}
?? ??? ??? ?將代碼?????
?? ??? ??? ? ? ? <div class="setting-drawer-index-handle" @click="toggle">
?? ??? ??? ????????<a-icon type="setting" v-if="!visible"/>
?? ??? ??? ????????<a-icon type="close" v-else/>
?? ??? ??? ??????</div>
?? ??? ??? ?更改為：
?? ??? ??? ???????<div class="setting-drawer-index-handle" @click="toggle" v-if="visible">
?? ??? ??? ?????????<a-icon type="close" />
?? ??? ??? ???????</div>
? ? ? ? 1.UserMenu.vue
<template><div class="user-wrapper" :class="theme"><span class="action"><a class="logout_title" target="_blank" href="http://jeecg-boot.mydoc.io"><a-icon type="question-circle-o"></a-icon></a></span><header-notice class="action"/><a-dropdown><span class="action action-full ant-dropdown-link user-dropdown-menu"><a-avatar class="avatar" size="small" :src="getAvatar()"/><span v-if="isDesktop()">歡迎您，{{ nickname() }}</span></span><a-menu slot="overlay" class="user-dropdown-menu-wrapper"><a-menu-item key="0"><router-link :to="{ name: 'account-center' }"><a-icon type="user"/><span>個人中心</span></router-link></a-menu-item><a-menu-item key="1"><router-link :to="{ name: 'account-settings-base' }"><a-icon type="setting"/><span>賬戶設置</span></router-link></a-menu-item><a-menu-item key="3" @click="systemSetting"><a-icon type="tool"/><span>系統設置</span></a-menu-item><a-menu-item key="4" @click="updatePassword"><a-icon type="setting"/><span>密碼修改</span></a-menu-item><a-menu-item key="5" @click="updateCurrentDepart"><a-icon type="cluster"/><span>切換部門</span></a-menu-item><!-- <a-menu-item key="2" disabled><a-icon type="setting"/><span>測試</span></a-menu-item><a-menu-divider/><a-menu-item key="3"><a href="javascript:;" @click="handleLogout"><a-icon type="logout"/><span>退出登錄</span></a></a-menu-item>--></a-menu></a-dropdown><span class="action"><a class="logout_title" href="javascript:;" @click="handleLogout"><a-icon type="logout"/><span v-if="isDesktop()"> 退出登錄</span></a></span><user-password ref="userPassword"></user-password><depart-select ref="departSelect" :closable="true" title="部門切換"></depart-select><setting-drawer ref="settingDrawer" :closable="true" title="系統設置"></setting-drawer></div>
</template><script>import HeaderNotice from './HeaderNotice'import UserPassword from './UserPassword'import SettingDrawer from "@/components/setting/SettingDrawer";import DepartSelect from './DepartSelect'import { mapActions, mapGetters } from 'vuex'import { mixinDevice } from '@/utils/mixin.js'export default {name: "UserMenu",mixins: [mixinDevice],components: {HeaderNotice,UserPassword,DepartSelect,SettingDrawer},props: {theme: {type: String,required: false,default: 'dark'}},methods: {...mapActions(["Logout"]),...mapGetters(["nickname", "avatar","userInfo"]),getAvatar(){console.log('url = '+ window._CONFIG['imgDomainURL']+"/"+this.avatar())return window._CONFIG['imgDomainURL']+"/"+this.avatar()},handleLogout() {const that = thisthis.$confirm({title: '提示',content: '真的要注銷登錄嗎 ?',onOk() {return that.Logout({}).then(() => {window.location.href="/";//window.location.reload()}).catch(err => {that.$message.error({title: '錯誤',description: err.message})})},onCancel() {},});},updatePassword(){let username = this.userInfo().usernamethis.$refs.userPassword.show(username)},updateCurrentDepart(){this.$refs.departSelect.show()},systemSetting(){this.$refs.settingDrawer.showDrawer()}}}
</script><style scoped>.logout_title {color: inherit;text-decoration: none;}
</style>
? ? ? ? 2.SettingDrawer.vue
<template><div class="setting-drawer"><a-drawerwidth="300"placement="right":closable="false"@close="onClose":visible="visible":style="{}"><div class="setting-drawer-index-content"><div :style="{ marginBottom: '24px' }"><h3 class="setting-drawer-index-title">整體風格設置</h3><div class="setting-drawer-index-blockChecbox"><a-tooltip><template slot="title">暗色菜單風格</template><div class="setting-drawer-index-item" @click="handleMenuTheme('dark')"><img src="https://gw.alipayobjects.com/zos/rmsportal/LCkqqYNmvBEbokSDscrm.svg" alt="dark"><div class="setting-drawer-index-selectIcon" v-if="navTheme === 'dark'"><a-icon type="check"/></div></div></a-tooltip><a-tooltip><template slot="title">亮色菜單風格</template><div class="setting-drawer-index-item" @click="handleMenuTheme('light')"><img src="https://gw.alipayobjects.com/zos/rmsportal/jpRkZQMyYRryryPNtyIC.svg" alt="light"><div class="setting-drawer-index-selectIcon" v-if="navTheme !== 'dark'"><a-icon type="check"/></div></div></a-tooltip></div></div><div :style="{ marginBottom: '24px' }"><h3 class="setting-drawer-index-title">主題色</h3><div style="height: 20px"><a-tooltip class="setting-drawer-theme-color-colorBlock" v-for="(item, index) in colorList" :key="index"><template slot="title">{{ item.key }}</template><a-tag :color="item.color" @click="changeColor(item.color)"><a-icon type="check" v-if="item.color === primaryColor"></a-icon></a-tag></a-tooltip></div></div><a-divider /><div :style="{ marginBottom: '24px' }"><h3 class="setting-drawer-index-title">導航模式</h3><div class="setting-drawer-index-blockChecbox"><a-tooltip><template slot="title">側邊欄導航</template><div class="setting-drawer-index-item" @click="handleLayout('sidemenu')"><img src="https://gw.alipayobjects.com/zos/rmsportal/JopDzEhOqwOjeNTXkoje.svg" alt="sidemenu"><div class="setting-drawer-index-selectIcon" v-if="layoutMode === 'sidemenu'"><a-icon type="check"/></div></div></a-tooltip><a-tooltip><template slot="title">頂部欄導航</template><div class="setting-drawer-index-item" @click="handleLayout('topmenu')"><img src="https://gw.alipayobjects.com/zos/rmsportal/KDNDBbriJhLwuqMoxcAr.svg" alt="topmenu"><div class="setting-drawer-index-selectIcon" v-if="layoutMode !== 'sidemenu'"><a-icon type="check"/></div></div></a-tooltip></div><div :style="{ marginTop: '24px' }"><a-list :split="false"><a-list-item><a-tooltip slot="actions"><template slot="title">該設定僅 [頂部欄導航] 時有效</template><a-select size="small" style="width: 80px;" :defaultValue="contentWidth" @change="handleContentWidthChange"><a-select-option value="Fixed">固定</a-select-option><a-select-option value="Fluid" v-if="layoutMode !== 'sidemenu'">流式</a-select-option></a-select></a-tooltip><a-list-item-meta><div slot="title">內容區域寬度</div></a-list-item-meta></a-list-item><a-list-item><a-switch slot="actions" size="small" :defaultChecked="fixedHeader" @change="handleFixedHeader" /><a-list-item-meta><div slot="title">固定 Header</div></a-list-item-meta></a-list-item><a-list-item><a-switch slot="actions" size="small" :disabled="!fixedHeader" :defaultChecked="autoHideHeader" @change="handleFixedHeaderHidden" /><a-list-item-meta><div slot="title" :style="{ textDecoration: !fixedHeader ? 'line-through' : 'unset' }">下滑時隱藏 Header</div></a-list-item-meta></a-list-item><a-list-item ><a-switch slot="actions" size="small" :disabled="(layoutMode === 'topmenu')" :checked="dataFixSiderbar" @change="handleFixSiderbar" /><a-list-item-meta><div slot="title" :style="{ textDecoration: layoutMode === 'topmenu' ? 'line-through' : 'unset' }">固定側邊菜單</div></a-list-item-meta></a-list-item></a-list></div></div><a-divider /><div :style="{ marginBottom: '24px' }"><h3 class="setting-drawer-index-title">其他設置</h3><div><a-list :split="false"><a-list-item><a-switch slot="actions" size="small" :defaultChecked="colorWeak" @change="onColorWeak" /><a-list-item-meta><div slot="title">色弱模式</div></a-list-item-meta></a-list-item><a-list-item><a-switch slot="actions" size="small" :defaultChecked="multipage" @change="onMultipageWeak" /><a-list-item-meta><div slot="title">多頁簽模式</div></a-list-item-meta></a-list-item></a-list></div></div><a-divider /><div :style="{ marginBottom: '24px' }"><a-alert type="warning"><span slot="message">配置欄只在開發環境用于預覽，生產環境不會展現，請手動修改配置文件<a href="https://github.com/sendya/ant-design-pro-vue/blob/master/src/defaultSettings.js" target="_blank">src/defaultSettings.js</a></span></a-alert></div></div><div class="setting-drawer-index-handle" @click="toggle" v-if="visible">
<!-- <a-icon type="setting" v-if="!visible"/>-->
<!-- <a-icon type="close" v-else/>--><a-icon type="close" /></div></a-drawer></div>
</template><script>import DetailList from '@/components/tools/DetailList'import SettingItem from '@/components/setting/SettingItem'import config from '@/defaultSettings'import { updateTheme, updateColorWeak, colorList } from '@/components/tools/setting'import { mixin, mixinDevice } from '@/utils/mixin.js'import { triggerWindowResizeEvent } from '@/utils/util'export default {components: {DetailList,SettingItem},mixins: [mixin, mixinDevice],data() {return {visible: true,colorList,dataFixSiderbar: false}},watch: {},mounted () {const vm = thissetTimeout(() => {vm.visible = false}, 16)// 當主題色不是默認色時，才進行主題編譯if (this.primaryColor !== config.primaryColor) {updateTheme(this.primaryColor)}if (this.colorWeak !== config.colorWeak) {updateColorWeak(this.colorWeak)}if (this.multipage !== config.multipage) {this.$store.dispatch('ToggleMultipage', this.multipage)}},methods: {showDrawer() {this.visible = true},onClose() {this.visible = false},toggle() {this.visible = !this.visible},onColorWeak (checked) {this.$store.dispatch('ToggleWeak', checked)updateColorWeak(checked)},onMultipageWeak (checked) {this.$store.dispatch('ToggleMultipage', checked)},handleMenuTheme (theme) {this.$store.dispatch('ToggleTheme', theme)},handleLayout (mode) {this.$store.dispatch('ToggleLayoutMode', mode)// 因為頂部菜單不能固定左側菜單欄，所以強制關閉this.handleFixSiderbar(false)// 觸發窗口resize事件triggerWindowResizeEvent()},handleContentWidthChange (type) {this.$store.dispatch('ToggleContentWidth', type)},changeColor (color) {if (this.primaryColor !== color) {this.$store.dispatch('ToggleColor', color)updateTheme(color)}},handleFixedHeader (fixed) {this.$store.dispatch('ToggleFixedHeader', fixed)},handleFixedHeaderHidden (autoHidden) {this.$store.dispatch('ToggleFixedHeaderHidden', autoHidden)},handleFixSiderbar (fixed) {if (this.layoutMode === 'topmenu') {fixed = false}this.dataFixSiderbar = fixedthis.$store.dispatch('ToggleFixSiderbar', fixed)}},}
</script><style lang="scss" scoped>.setting-drawer-index-content {.setting-drawer-index-blockChecbox {display: flex;.setting-drawer-index-item {margin-right: 16px;position: relative;border-radius: 4px;cursor: pointer;img {width: 48px;}.setting-drawer-index-selectIcon {position: absolute;top: 0;right: 0;width: 100%;padding-top: 15px;padding-left: 24px;height: 100%;color: #1890ff;font-size: 14px;font-weight: 700;}}}.setting-drawer-theme-color-colorBlock {width: 20px;height: 20px;border-radius: 2px;float: left;cursor: pointer;margin-right: 8px;padding-left: 0px;padding-right: 0px;text-align: center;color: #fff;font-weight: 700;i {font-size: 14px;}}}.setting-drawer-index-handle {position: absolute;top: 240px;background: #1890ff;width: 48px;height: 48px;right: 300px;display: flex;justify-content: center;align-items: center;cursor: pointer;pointer-events: auto;z-index: 1001;text-align: center;font-size: 16px;border-radius: 4px 0 0 4px;i {color: rgb(255, 255, 255);font-size: 20px;}}
</style>
總結
以上是生活随笔為你收集整理的隐藏/显示jeecg-boot 后端管理页面的右侧的系统设置的全部內容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。
