vue3.2 汉堡按钮伸缩项（左侧菜单的伸缩）

原创

已于 2022-02-26 11:35:30 修改 · 1.9k 阅读

标签

#vue.js #javascript #前端

收录于

于 2022-02-26 11:34:40 首次发布

本文介绍了如何在Vue应用中通过Vuex管理状态，实现Hamburger菜单的点击切换，并同步更新侧边栏和主内容区域的宽度。涉及组件引用、Vuex state与mutations的使用以及CSS的动态计算。

1、创建组件来使用，@/layout/components/hanburger.vue

2、引用到整体页面

3、vuex 中@/store/modules/app 设置参数，点击进行相关变化

 state: () => ({
    siderType: true,
  }),
 mutations: {
    changeSiderType(state) {
      state.siderType = !state.siderType
    },
  },

4.@/layout/components/hamburger.点击后图标的变化

<div class="hamburger-container" @click="toggleClick">
    <svg-icon :icon="icon"></svg-icon>
 </div>

//js中
// 使用vuex
import { useStore } from 'vuex'
import { computed } from 'vue'
const store = useStore()
const toggleClick = () => {
  store.commit('app/changeSiderType')
}
// 图标转换
const icon = computed(() => {
  return store.getters.siderType ? 'hamburger-opened' : 'hamburger-closed'
})

5、 menu是否折叠 @/layout/menu/index.vue