Vue前端项目

2023-10-04 08:37| 来源: 网络整理| 查看: 265

1、思路

2、按钮单击事件

3、父组件调用 Vuex 改变侧边栏状态

4、新建app模块用于管理整个应用状态

5、左侧菜单栏

6、隐藏样式

实现效果

展开效果图:

合并效果图:

1、思路点击按钮（展开与折叠按钮），触发左侧菜单栏的张开与折叠，需要使用一个变量（state.sidebar.opened）来控制为什么要用 state.sidebar.opened 全局变量? 原因是按钮组件与侧边栏组件不是父子组件的关系，按钮点击事件改变 state.sidebar.opened 值为 true 或 false。侧边栏组件需要读取 state.sidebar.opened 来决定自己是要展开还是折叠？左侧 el-menu 组件中有 collapse 属性是控制菜单栏的展开与收缩。我们可以通过 state.sidebar.opened 值，来控制 el-menu元素只是设置 el-menu 中 collapse 属性还是不够的, 还需要配置左边侧边栏的隐藏样式, 通过state.sidebar.opened 动态显示样式 2、按钮单击事件

在 src / components / Hamburger / index.vue (按钮组件) 中

新增单击事件

单击事件中调用父组件方法

toggleClick() {

this.$emit('toggleClick')

}

具体代码:

export default { name: 'Hamburger', props: { isActive: { type: Boolean, default: false } }, methods: { toggleClick() { this.$emit('toggleClick') } } } .hamburger { display: inline-block; vertical-align: middle; width: 20px; height: 20px; } .hamburger.is-active { transform: rotate(180deg); } 3、父组件调用 Vuex 改变侧边栏状态

在 src / layout / components / Navbar.vue 中

子组件调用父组件方法：

父组件调用 vuex 改变state.sidebar.opened 的值

toggleSideBar() {

this.$store.dispatch('app/toggleSideBar')

}

具体代码：

import Hamburger from '@/components/Hamburger' export default { data() { return {} }, components: { Hamburger }, methods: { toggleSideBar() { this.$store.dispatch('app/toggleSideBar') } } } .navbar { height: 50px; overflow: hidden; position: relative; background: #fff; box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08); .hamburger-container { line-height: 46px; height: 100%; float: left; cursor: pointer; transition: background 0.3s; -webkit-tap-highlight-color: transparent; &:hover { background: rgba(0, 0, 0, 0.025); } } } 4、新建app模块用于管理整个应用状态

新建 src / store / modules / app.js 内容为:

import Cookies from 'js-cookie' const state = { sidebar: { opened: Cookies.get('sidebarStatus') ? !!+Cookies.get('sidebarStatus') : true, withoutAnimation: false } } const mutations = { TOGGLE_SIDEBAR: state => { state.sidebar.opened = !state.sidebar.opened state.sidebar.withoutAnimation = false if (state.sidebar.opened) { Cookies.set('sidebarStatus', 1) } else { Cookies.set('sidebarStatus', 0) } }, CLOSE_SIDEBAR: (state, withoutAnimation) => { Cookies.set('sidebarStatus', 0) state.sidebar.opened = false state.sidebar.withoutAnimation = withoutAnimation } } const actions = { toggleSideBar({ commit }) { commit('TOGGLE_SIDEBAR') }, closeSideBar({ commit }, { withoutAnimation }) { commit('CLOSE_SIDEBAR', withoutAnimation) } } export default { namespaced: true, state, mutations, actions } 5、左侧菜单栏

在 src / layout / components / Sidebar / index.vue 中

控制 el-menu 的展开和折叠

isCollapse方法：

isCollapse() {

return !this.sidebar.opened

}

具体代码：

import { mapGetters } from 'vuex' import SidebarItem from './SidebarItem' import variables from '@/assets/styles/variables.scss' export default { data() { return {} }, components: { SidebarItem }, methods: { handleOpen(key, keyPath) { console.log(key, keyPath) }, handleClose(key, keyPath) { console.log(key, keyPath) } }, computed: { ...mapGetters(['permission_routes', 'sidebar']), activeMenu() { const route = this.$route const { meta, path } = route // if set path, the sidebar will highlight the path you set if (meta.activeMenu) { return meta.activeMenu } return path }, variables() { return variables }, isCollapse() { return !this.sidebar.opened } } } 6、隐藏样式

在 src / assets / styles / sidebar.scss 中, 新增隐藏样式

#app { .main-container { min-height: 100%; transition: margin-left .28s; margin-left: $sideBarWidth; position: relative; } .sidebar-container { width: $sideBarWidth !important; background-color: $menuBg; height: 100%; position: fixed; font-size: 0px; top: 0; bottom: 0; left: 0; overflow: hidden; .scrollbar-wrapper { height: 100%; overflow-x: hidden !important; .el-scrollbar__wrap { overflow-x: hidden !important; } a { display: inline-block; width: 100%; overflow: hidden; text-decoration: none; } .el-menu { border: none; height: 100%; width: 100% !important; } .svg-icon { margin-right: 16px; } } } .hideSidebar { .sidebar-container { width: 54px !important; } .main-container { margin-left: 54px; } .submenu-title-noDropdown { padding: 0 !important; position: relative; .el-tooltip { padding: 0 !important; .svg-icon { margin-left: 20px; } } } .el-submenu { overflow: hidden; &>.el-submenu__title { padding: 0 !important; .svg-icon { margin-left: 20px; } .el-submenu__icon-arrow { display: none; } } } .el-menu--collapse { .el-submenu { &>.el-submenu__title { &>span { height: 0; width: 0; overflow: hidden; visibility: hidden; display: inline-block; } } } } } }

【本文地址】

公司简介

联系我们