|
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】 我们会及时删除侵权内容,谢谢合作! |
|