快捷導(dǎo)航

Vue-element-admin平臺側(cè)邊欄收縮控制問題

更新時間：2022年10月09日 17:10:11 作者：Mr-K

這篇文章主要介紹了Vue-element-admin平臺側(cè)邊欄收縮控制問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

Vue-element-admin平臺側(cè)邊欄收縮控制

//找到store/modules/app.js文件
const app = {
  state: {
    sidebar: {
      // opened: !+Cookies.get('sidebarStatus'),        //原值
      opened:true,                                      //默認(rèn)展開（false是隱藏）
      withoutAnimation: false
    },
    device: 'desktop',
    language: Cookies.get('language') || 'en',
    size: Cookies.get('size') || 'medium'
  },
  mutations: {
    TOGGLE_SIDEBAR: state => {            //點(diǎn)擊收縮功能觸發(fā)
      // if (state.sidebar.opened) {
      //   Cookies.set('sidebarStatus', 1)
      // } else {
      //   Cookies.set('sidebarStatus', 0)
      // }
      // state.sidebar.opened = !state.sidebar.opened
      state.sidebar.opened = true
      state.sidebar.withoutAnimation = false
    },
    CLOSE_SIDEBAR: (state, withoutAnimation) => {        //自適應(yīng)觸發(fā)
      Cookies.set('sidebarStatus',1)
      state.sidebar.opened = true
      state.sidebar.withoutAnimation = withoutAnimation
    }
    //......后面的就不展示了
}

修改vue-element-admin出現(xiàn)側(cè)邊欄與導(dǎo)航欄空白報錯

問題描述

根據(jù)自己的需求修改導(dǎo)航欄與側(cè)邊欄樣式，修改過程中突然導(dǎo)航欄與側(cè)邊欄消失，控制臺報紅，說導(dǎo)航欄與側(cè)邊欄的注冊出現(xiàn)問題。

但是，原本的注冊組件代碼我根本沒改呀，百度一圈的答案也都是復(fù)制黏貼且無法解決我當(dāng)前的問題

如上圖所示，進(jìn)入頁面后先報navbar與sidebar注冊有問題，下面的兩行打印是在Layout的index.vue中，mounted打印的元素。

之前根本不渲染，在添加了console.log語句后側(cè)邊與導(dǎo)航渲染時有時無，控制臺無論這倆組件是否渲染都會報注冊組件問題。

原因分析

代碼中不存這倆組件相互調(diào)用產(chǎn)生的循環(huán)，且組件名稱注冊使用無誤，出現(xiàn)這種情況應(yīng)該是加載受到了某些因素的影響

通過排查，原來是引入store導(dǎo)致這倆組件加載受到了影響：

原element-admin登錄成功后，頂部導(dǎo)航欄沒有用戶名顯示，于是我從store中獲取登錄的用戶名，導(dǎo)致整個Layout加載崩潰

錯誤示范：

Navbar.vue

import store from '@/store'
...//省略其他組件引用
export default { 
	data(){
		return {userName:''}
	},
	methods:{
		getUserName(){
			this.userName = store.getters.name
        }
	}
}

ps：不管將import store...這行放在組件導(dǎo)入前還是導(dǎo)入后，都會影響navbar與sidebar的加載

解決方案

將store引入放在組件加載完畢之后

Navbar.vue

...//省略其他組件引用
export default {
	data(){
		return {userName:''}
	},
	mounted(){
		this.$nextTick(()=>{
			this.getUserName()
		})
	},
	methods:{
		getUserName(){
			const user = require('../../store');
			this.userName = user.default.getters.name;
        }
	}	
}

以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: