快捷導(dǎo)航

vue中實(shí)現(xiàn)展示與隱藏側(cè)邊欄功能

更新時(shí)間：2024年08月30日 14:59:11 作者：Zero0985

這篇文章主要介紹了vue中實(shí)現(xiàn)展示與隱藏側(cè)邊欄功能,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教

vue展示與隱藏側(cè)邊欄功能

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;
    }
},

總結(jié)

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

vueCl如何查看打包后文件的大小占比
這篇文章主要介紹了vueCl如何查看打包后文件的大小占比問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2023-06-06
解決vuex改變了state的值,但是頁(yè)面沒(méi)有更新的問(wèn)題
這篇文章主要介紹了解決vuex改變了state的值,但是頁(yè)面沒(méi)有更新的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2020-11-11
vue2.0實(shí)現(xiàn)音樂(lè)/視頻播放進(jìn)度條組件
這篇文章主要為大家詳細(xì)介紹了vue2.0實(shí)現(xiàn)音樂(lè)和視頻播放進(jìn)度條組件的思路及具體實(shí)現(xiàn)方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2018-06-06
vue 指定組件緩存實(shí)例詳解
keep-alive 是 Vue 內(nèi)置的一個(gè)組件，可以使被包含的組件保留狀態(tài)，或避免重新渲染。這篇文章主要介紹了vue 指定組件緩存,需要的朋友可以參考下
2018-04-04
Vue按需加載的具體實(shí)現(xiàn)
本篇文章主要介紹了Vue按需加載的具體實(shí)現(xiàn)，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2017-12-12
vue3 onMounted異步函數(shù)同步請(qǐng)求async/await實(shí)現(xiàn)
這篇文章主要為大家介紹了vue3 onMounted初始化數(shù)據(jù)異步函數(shù)/同步請(qǐng)求async/await實(shí)現(xiàn)詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2023-07-07
Vue3中的createGlobalState用法及示例詳解
createGlobalState 是 Vue 3 中一種管理全局狀態(tài)的簡(jiǎn)便方式,通常用于管理多個(gè)組件間共享的狀態(tài),由 @vueuse/core 提供的,允許創(chuàng)建一個(gè)響應(yīng)式的全局狀態(tài),本文給大家介紹了Vue3中的createGlobalState用法及示例,需要的朋友可以參考下
2024-10-10
vue2中前端實(shí)現(xiàn)語(yǔ)音播報(bào)的詳細(xì)過(guò)程
vue中語(yǔ)音播報(bào),目前本人寫的過(guò)程中,遇到了兩種情況,第一種是后端直接返回一個(gè)mp3的播放url,第二種就是播報(bào)的內(nèi)容需要前端自己拼接的,關(guān)于兩種方法,我都說(shuō)一下如何實(shí)現(xiàn),感興趣的朋友一起看看吧
2024-07-07
在Vue中使用CSS3實(shí)現(xiàn)內(nèi)容無(wú)縫滾動(dòng)的示例代碼
這篇文章主要介紹了在Vue中使用CSS3實(shí)現(xiàn)內(nèi)容無(wú)縫滾動(dòng)的示例代碼，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2020-11-11
SpringBoot+Vue項(xiàng)目線上買菜系統(tǒng)源碼展示
本線上買菜系統(tǒng)采用的數(shù)據(jù)庫(kù)是Mysql，使用springboot框架開發(fā)。在設(shè)計(jì)過(guò)程中，充分保證了系統(tǒng)代碼的良好可讀性、實(shí)用性、易擴(kuò)展性、通用性、便于后期維護(hù)、操作方便以及頁(yè)面簡(jiǎn)潔等特點(diǎn),需要的朋友可以參考下
2022-08-08