Vue-element-admin平台侧边栏收缩控制问题

 更新时间:2022年10月09日 17:10:11   作者:Mr-K  
这篇文章主要介绍了Vue-element-admin平台侧边栏收缩控制问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

Vue-element-admin平台侧边栏收缩控制

//找到store/modules/app.js文件
const app = {
  state: {
    sidebar: {
      // opened: !+Cookies.get('sidebarStatus'),        //原值
      opened:true,                                      //默认展开(false是隐藏)
      withoutAnimation: false
    },
    device: 'desktop',
    language: Cookies.get('language') || 'en',
    size: Cookies.get('size') || 'medium'
  },
  mutations: {
    TOGGLE_SIDEBAR: state => {            //点击收缩功能触发
      // 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) => {        //自适应触发
      Cookies.set('sidebarStatus',1)
      state.sidebar.opened = true
      state.sidebar.withoutAnimation = withoutAnimation
    }
    //......后面的就不展示了
}

修改vue-element-admin出现侧边栏与导航栏空白报错

问题描述

根据自己的需求修改导航栏与侧边栏样式,修改过程中突然导航栏与侧边栏消失,控制台报红,说导航栏与侧边栏的注册出现问题。

但是,原本的注册组件代码我根本没改呀,百度一圈的答案也都是复制黏贴且无法解决我当前的问题

如上图所示,进入页面后先报navbar与sidebar注册有问题,下面的两行打印是在Layout的index.vue中,mounted打印的元素。

之前根本不渲染,在添加了console.log语句后侧边与导航渲染时有时无,控制台无论这俩组件是否渲染都会报注册组件问题。

原因分析

代码中不存这俩组件相互调用产生的循环,且组件名称注册使用无误,出现这种情况应该是加载受到了某些因素的影响

通过排查,原来是引入store导致这俩组件加载受到了影响:

原element-admin登录成功后,顶部导航栏没有用户名显示,于是我从store中获取登录的用户名,导致整个Layout加载崩溃

错误示范:

Navbar.vue

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

ps:不管将import store...这行放在组件导入前还是导入后,都会影响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;
        }
	}	
}

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • element-ui表格数据转换的示例代码

    element-ui表格数据转换的示例代码

    这篇文章主要介绍了element-ui表格数据转换的示例代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-08-08
  • Vue内置组件Teleport的使用

    Vue内置组件Teleport的使用

    Teleport是一个内置组件,它可以将一个组件内部的一部分模板“传送”到该组件的 DOM 结构外层的位置去,本文就来介绍一下如何使用,感兴趣的可以了解一下
    2023-05-05
  • Vue项目首屏性能优化组件实战指南

    Vue项目首屏性能优化组件实战指南

    Vue众所周知是一个轻量级的框架,源码仅仅为72.9KB,但是也有它自己的缺点,就是首屏加载会比较慢,这篇文章主要给大家介绍了关于Vue项目首屏性能优化组件的相关资料,需要的朋友可以参考下
    2021-11-11
  • 解决vue2.0路由跳转未匹配相应用路由避免出现空白页面的问题

    解决vue2.0路由跳转未匹配相应用路由避免出现空白页面的问题

    今天小编就为大家分享一篇解决vue2.0路由跳转未匹配相应用路由避免出现空白页面的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-08-08
  • Vue传递参数不在URL路径拼接显示问题

    Vue传递参数不在URL路径拼接显示问题

    这篇文章主要介绍了Vue传递参数不在URL路径拼接显示问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-03-03
  • vuex的辅助函数该如何使用

    vuex的辅助函数该如何使用

    vue通过辅助函数mapState、mapActions、mapMutations,把vuex.store中的属性映射到vue实例身上,这样在vue实例中就能访问vuex.store中的属性了,对于操作vuex.store就很方便了,本文具体的介绍下这些辅助函数的使用方法
    2021-06-06
  • vue多次循环操作示例

    vue多次循环操作示例

    这篇文章主要介绍了vue多次循环操作,结合实例形式分析了vue.js针对json嵌套数据的多次循环读取操作相关实现技巧,需要的朋友可以参考下
    2019-02-02
  • Vue中的Tree-Shaking介绍及原理

    Vue中的Tree-Shaking介绍及原理

    这篇文章主要介绍了Vue中的Tree-Shaking是什么,通过Tree-shaking,将没有使用的模块代码移除掉,这样来达到删除无用代码的目,本文结合实例代码详解详解,需要的朋友可以参考下
    2023-04-04
  • vue+echarts绘制折线图、柱状图和扇形图教程

    vue+echarts绘制折线图、柱状图和扇形图教程

    这篇文章主要介绍了vue+echarts绘制折线图、柱状图和扇形图教程,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-03-03
  • 一篇文章带你了解Vue组件的创建和使用

    一篇文章带你了解Vue组件的创建和使用

    这篇文章主要为大家介绍了Vue组件的创建和使用,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能够给你带来帮助
    2021-12-12

最新评论