翼度科技»论坛 编程开发 JavaScript 查看内容

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

5

主题

5

帖子

15

积分

新手上路

Rank: 1

积分
15
vue展示与隐藏侧边栏功能


navbar.vue
  1. <span @click="closeSidebar" class="sidebar">
  2.     <svg-icon :icon-class="'sidebar'" :class="{ changeCollapse: isCollapse }"/>
  3. </span>
复制代码
  1. closeSidebar() {
  2.     this.$store.commit("user/CLOSE_SIDEBAR");
  3. },
复制代码
stor中user.js
  1. const user = {
  2.     namespaced: true,
  3.     state: {
  4.         opened: localStorage.getItem('sidebarStatus') ? !!+localStorage.getItem('sidebarStatus') : true,
  5.     },
  6.     mutations: {
  7.         CLOSE_SIDEBAR: (state) => {
  8.             state.opened = !state.opened
  9.         if (state.opened) {
  10.             localStorage.setItem('sidebarStatus', 1)
  11.         } else {
  12.             localStorage.setItem('sidebarStatus', 0)
  13.         }

  14.         },
  15.     },
  16.     getters: {
  17.         opened: state => state.opened
  18.     }
  19. }

  20. export default user
复制代码
sidebar.vue
  1. <el-menu
  2.        :default-active="defaultActive"
  3.        class="el-menu-vertical-demo"
  4.        background-color="#3C4A78"
  5.        :active-text-color="isCollapse ? '#fff' : '#3C4A78'"
  6.        text-color="#F6F8FF"
  7.        unique-opened
  8.        :collapse="isCollapse"
  9.        :collapse-transition="false"
  10.    >
  11. </el-menu>
复制代码
  1. import { mapGetters } from "vuex";
  2. computed: {
  3.     ...mapGetters("user", ["opened"]),
  4.     isCollapse() {
  5.       return !this.opened;
  6.     }
  7. },
复制代码
总结

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

来源:https://www.jb51.net/javascript/3267398rg.htm
免责声明:由于采集信息均来自互联网,如果侵犯了您的权益,请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容,谢谢合作!

举报 回复