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

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.点击后图标的变化

//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

 :collapse="!$store.getters.siderType"

     菜单的宽度变化 @/layout/index.vue

//template//js
// 使用到vuex
import { useStore } from 'vuex'
import variables from '@/styles/variables.scss'
const store = useStore()
const asideWidth = computed(() => {return store.getters.siderType? variables.sideBarWidth: variables.hideSideBarWidth
})

    右侧的宽度也是动态变化的

//template//css&.hidderContainer {width: calc(100% - $hideSideBarWidth);}扩展：calc()动态计算   &.上一级的目录（lang='scss'使用）

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！