软件开发培训班 >> 编程开发 >> JavaScript


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

vue展示与隐藏侧边栏功能

navbar.vue

<span @click="closeSidebar" class="sidebar">
    <svg-icon :icon-class="'sidebar'" :class="{ changeCollapse: isCollapse }"/>
</span>
closeSidebar() {
    this.$store.commit("user/CLOSE_SIDEBAR");
},

stor中user.js

const user = {
    namespaced: true,
    state: {
        opened: localStorage.getItem('sidebarStatus') ? !!+localStorage.getItem('sidebarStatus') : true,
    },
    mutations: {
        CLOSE_SIDEBAR: (state) => {
            state.opened = !state.opened
        if (state.opened) {
            localStorage.setItem('sidebarStatus', 1)
        } else {
            localStorage.setItem('sidebarStatus', 0)
        }

        },
    },
    getters: {
        opened: state => state.opened
    }
}

export default user

sidebar.vue

<el-menu
       :default-active="defaultActive"
       class="el-menu-vertical-demo"
       background-color="#3C4A78"
       :active-text-color="isCollapse ? '#fff' : '#3C4A78'"
       text-color="#F6F8FF"
       unique-opened
       :collapse="isCollapse"
       :collapse-transition="false"
   >
</el-menu>
import { mapGetters } from "vuex";
computed: {
    ...mapGetters("user", ["opened"]),
    isCollapse() {
      return !this.opened;
    }
},

总结

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