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;
}
},
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
来源:https://www.jb51.net/javascript/3267398rg.htm
免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容，谢谢合作！
页:
[1]