vue中实现展示与隐藏侧边栏功能

我有我天地

vue展示与隐藏侧边栏功能


navbar.vue

1. <span @click="closeSidebar" class="sidebar">
   
2.     <svg-icon :icon-class="'sidebar'" :class="{ changeCollapse: isCollapse }"/>
   
3. </span>

复制代码

1. closeSidebar() {
   
2.     this.$store.commit("user/CLOSE_SIDEBAR");
   
3. },

复制代码

stor中user.js

1. const user = {
   
2.     namespaced: true,
   
3.     state: {
   
4.         opened: localStorage.getItem('sidebarStatus') ? !!+localStorage.getItem('sidebarStatus') : true,
   
5.     },
   
6.     mutations: {
   
7.         CLOSE_SIDEBAR: (state) => {
   
8.             state.opened = !state.opened
   
9.         if (state.opened) {
   
10.             localStorage.setItem('sidebarStatus', 1)
    
11.         } else {
    
12.             localStorage.setItem('sidebarStatus', 0)
    
13.         }
    
14. 
    
15.         },
    
16.     },
    
17.     getters: {
    
18.         opened: state => state.opened
    
19.     }
    
20. }
    
21. 
    
22. export default user

复制代码

sidebar.vue

1. <el-menu
   
2.        :default-active="defaultActive"
   
3.        class="el-menu-vertical-demo"
   
4.        background-color="#3C4A78"
   
5.        :active-text-color="isCollapse ? '#fff' : '#3C4A78'"
   
6.        text-color="#F6F8FF"
   
7.        unique-opened
   
8.        :collapse="isCollapse"
   
9.        :collapse-transition="false"
   
10.    >
    
11. </el-menu>

复制代码

1. import { mapGetters } from "vuex";
   
2. computed: {
   
3.     ...mapGetters("user", ["opened"]),
   
4.     isCollapse() {
   
5.       return !this.opened;
   
6.     }
   
7. },

复制代码

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

来源:https://www.jb51.net/javascript/3267398rg.htm
免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容，谢谢合作！