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
    }
    //......后面的就不展示了
}

 

  • 6
    点赞
  • 9
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
Vue-element-admin 是一个基于 Vue.js 和 Element UI 的后台管理系统解决方案。它提供了许多常用的后台管理功能和组件,包括侧边栏、面包屑导航、表格、表单、图表等等。 侧边栏Vue-element-admin 中的一个重要组件,它通常用于展示系统的菜单和功能项。在 Vue-element-admin 中,侧边栏是通过路由配置来生成的。 在路由配置中,每一个路由配置项对应着一个菜单项。菜单项包括菜单的标题、图标、路径、子菜单等信息。当用户点击菜单项时,就会跳转到对应的路由页面。 以下是一个简单的示例,演示如何使用 Vue-element-admin侧边栏组件: ```javascript // 路由配置 const routes = [ { path: '/', redirect: '/dashboard' }, { path: '/dashboard', component: Layout, children: [ { path: '', name: 'Dashboard', component: () => import('@/views/dashboard/index'), meta: { title: 'Dashboard', icon: 'dashboard' } } ] }, { path: '/example', component: Layout, redirect: '/example/table', name: 'Example', meta: { title: 'Example', icon: 'example' }, children: [ { path: 'table', name: 'Table', component: () => import('@/views/table/index'), meta: { title: 'Table', icon: 'table' } }, { path: 'tree', name: 'Tree', component: () => import('@/views/tree/index'), meta: { title: 'Tree', icon: 'tree' } } ] } ] // 侧边栏组件 <template> <el-menu :default-active="activeIndex" class="el-menu-vertical-demo" :collapse="isCollapse"> <template v-for="(item, index) in menuList"> <el-submenu v-if="item.children" :key="index" :index="index"> <template slot="title"> <i :class="item.icon"></i> <span slot="title">{{item.title}}</span> </template> <template v-for="(subItem, subIndex) in item.children"> <el-menu-item :key="index + '-' + subIndex" :index="index + '-' + subIndex" @click="handleMenuClick(subItem)"> <i :class="subItem.icon"></i> <span slot="title">{{subItem.title}}</span> </el-menu-item> </template> </el-submenu> <el-menu-item v-else :key="index" :index="index" @click="handleMenuClick(item)"> <i :class="item.icon"></i> <span slot="title">{{item.title}}</span> </el-menu-item> </template> </el-menu> </template> <script> export default { props: { menuList: { type: Array, required: true }, activeIndex: { type: String, required: true }, isCollapse: { type: Boolean, required: true } }, methods: { handleMenuClick(item) { this.$emit('menu-click', item) } } } </script> ``` 在这个示例中,路由配置包含了三个路由项,分别对应 Dashboard、Table 和 Tree 三个菜单项。侧边栏组件则使用了 Element UI 中的 Menu 组件来展示菜单项。侧边栏组件的主要作用是传递菜单项列表、当前选中的菜单项和侧边栏是否折叠等参数,以及监听菜单项的点击事件。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值