我要评论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;
}
},总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持代码网。
发表评论