vue处理侧边栏的展开和收起功能

处理侧边栏的展开和收起功能

->(第一步:在vuex的state里面定义侧边栏的宽度)

(*store/index.js实现代码如下) `

const store = createStore({
    state() {
       return {
         //侧边栏的宽度
         asideWidth:"250px",
       }
    },
    mutations:{
        // 定义展开或者收起侧边栏的状态
        handleAsideWidth(state) {
        state.asideWidth = state.asideWidth === "250px"  ?  "64px" : "250px" 
      }
    }
})

`

->(第二步:引入到Header.vue组件中)

(*代码如下)

`

<template>
   <!-- 收起或者展开状态 -->
   <el-icon class="icon-btn" @click="$store.commit('handleAsideWidth')">
   <!--展开图标-->
   <fold v-if="$store.state.asideWidth === '250px'"/>
   <!--收起图标-->
   <Expand v-else/>
   </el-icon>
</template>

`

->(第三步:在引入到Menu.vue组件中)

(*代码如下) `

<template>
  <div class="f-menu" :style="{   width:$store.state.asideWidth }">
   <!-- collapse:侧边栏是否展开 -->
  <el-menu unique-opened  :collapse="isCollapse" default-active="2" class="border-0" router :collapse-transition="false">
  </el-menu>
 </div>
</template>

<!--script部分-->
 <script>
  import { computed } from 'vue'
  import { useStore } from 'vuex'

 //是否折叠
 const store = useStore()

 const isCollapse = computed(() => !(store.state.asideWidth === '250px'))
</script>

<!--样式部分-->

 <style>
 .f-menu {
    /* 加上动画 */
    transition: all 0.2s;
    width: 250px;
    top: 64px;
    bottom: 0;
    left: 0;
    overflow-y: auto;
    overflow-x:hidden;
    @apply shadow-md fixed bg-light-50;
 }
 </style>

`

->(第四步:改变主屏的大小)

(*代码如下) 在src/Layout下的index.vue中 `

<template>
<el-aside :width="$store.state.asideWidth">
<!-- 侧边栏 -->
<Menu></Menu>
</el-aside>
</template>

<!-- 添加一个动画的效果 -->
<style scoped>
  .el-side {
    transition: all 0.2s;
  }
</style>

`