九、vue3+ts项目框架搭建——顶部左侧按钮折叠菜单效果

逻辑分析

• 首先在pinia中定义默认变量为fold为false，默认不折叠

//小仓库：layout组件相关配置仓库
import { defineStore } from 'pinia'

let useLayOutSettingStore = defineStore('SettingStore', {
  state: () => {
    return {
      fold: false, //用户控制菜单折叠还是收起的控制
    }
  },
})

export default useLayOutSettingStore

• 点击按钮改变pinia中变量为 !fold

<template>
  <!-- 顶部左侧的图标 -->
  <el-icon style="margin-right: 10px" @click="changeIcon">
    <component :is="LayOutSettingStore.fold ? 'Fold' : 'Expand'"></component>
  </el-icon>
  。。。。。。。
</template>

<script setup lang="ts">
import useLayOutSettingStore from '@/store/modules/setting'
//获取layout配置相关的仓库
let LayOutSettingStore = useLayOutSettingStore()

//点击图标的切换
const changeIcon = () => {
  //图标进行切换
  LayOutSettingStore.fold = !LayOutSettingStore.fold
}
</script>
。。。。。。

• 在以下组件中获取pinia中fold变量用来做判断
  • 切换折叠图标样式
  • 在左侧组件添加类名，控制该类名下的width为另一个变量
  • 在menu组件控制collapse 是否折叠
  • 控制右侧上面组件和内容区域组件的宽度和距离左侧的距离