欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時(shí)間:2022年10月09日 17:10:11   作者:Mr-K  
這篇文章主要介紹了Vue-element-admin平臺側(cè)邊欄收縮控制問題,具有很好的參考價(jià)值,希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教

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)航欄空白報(bào)錯(cuò)

問題描述

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

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

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

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

原因分析

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

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

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

錯(cuò)誤示范:

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;
        }
	}	
}

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

相關(guān)文章

  • Vue中正確使用Element-UI組件的方法實(shí)例

    Vue中正確使用Element-UI組件的方法實(shí)例

    這篇文章主要給大家介紹了關(guān)于Vue中正確使用Element-UI組件的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2020-10-10
  • Sublime Text新建.vue模板并高亮(圖文教程)

    Sublime Text新建.vue模板并高亮(圖文教程)

    這篇文章主要介紹了Sublime Text新建.vue模板并高亮(圖文教程),小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧
    2017-10-10
  • Vue3(二)集成Ant Design Vue

    Vue3(二)集成Ant Design Vue

    上一篇文章我們介紹了利用Vue3 創(chuàng)建Vue CLI 項(xiàng)目(一),接下來就來看看Vue3集成Ant Design Vue 的相關(guān)資料,需要的小伙伴可以參考一下文章的具體內(nèi)容
    2021-10-10
  • Vue.js實(shí)現(xiàn)一個(gè)自定義分頁組件vue-paginaiton

    Vue.js實(shí)現(xiàn)一個(gè)自定義分頁組件vue-paginaiton

    這篇文章主要為大家詳細(xì)介紹了Vue.js實(shí)現(xiàn)一個(gè)自定義分頁組件vue-paginaiton的具體代碼,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2016-09-09
  • vue中的依賴注入provide和inject簡單介紹

    vue中的依賴注入provide和inject簡單介紹

    這篇文章主要介紹了vue中的依賴注入provide和inject簡單介紹,provide 選項(xiàng)允許我們指定我們想要提供給后代組件的數(shù)據(jù)/方法,本文通過組價(jià)刷新的案列給大家詳細(xì)講解,需要的朋友可以參考下
    2022-11-11
  • Vue3.0插件執(zhí)行原理與實(shí)戰(zhàn)

    Vue3.0插件執(zhí)行原理與實(shí)戰(zhàn)

    這篇文章主要介紹了Vue3.0插件執(zhí)行原理與實(shí)戰(zhàn),Vue項(xiàng)目能夠使用很多插件來豐富自己的功能Vue-Router、Vuex等,節(jié)省了我們大量的人力和物力,下面我們就一起來了解Vue3.0插件的原理吧,需要的小伙伴可以參考一下
    2022-02-02
  • Vue+axios 實(shí)現(xiàn)http攔截及路由攔截實(shí)例

    Vue+axios 實(shí)現(xiàn)http攔截及路由攔截實(shí)例

    這篇文章主要介紹了Vue+axios 實(shí)現(xiàn)http攔截及路由攔截 ,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧
    2017-04-04
  • 使用vue init webpack項(xiàng)目名創(chuàng)建項(xiàng)目方式

    使用vue init webpack項(xiàng)目名創(chuàng)建項(xiàng)目方式

    這篇文章主要介紹了使用vue init webpack項(xiàng)目名創(chuàng)建項(xiàng)目方式,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2023-11-11
  • vue 界面刷新數(shù)據(jù)被清除 localStorage的使用詳解

    vue 界面刷新數(shù)據(jù)被清除 localStorage的使用詳解

    今天小編就為大家分享一篇vue 界面刷新數(shù)據(jù)被清除 localStorage的使用詳解,具有很好的參考價(jià)值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2018-09-09
  • Vue框架中正確引入JS庫的方法介紹

    Vue框架中正確引入JS庫的方法介紹

    最近在學(xué)習(xí)使用vue框架,在使用中遇到了一個(gè)問題,查找相關(guān)資料終于找了正確的姿勢,所以這篇文章主要給大家介紹了關(guān)于在Vue框架中正確引入JS庫的方法,需要的朋友可以參考借鑒,下面來一起看看吧。
    2017-07-07

最新評論