element-ui NavMenut组件与 Tabs组件联动

SevenDream_Y

已于 2022-04-30 22:19:50 修改

阅读量3.5k

点赞数 27

分类专栏： vue 文章标签： element-ui

于 2019-08-28 15:56:19 首次发布

本文链接：https://blog.csdn.net/sakurazhaoyang/article/details/100121047

版权

vue 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

效果

在这里插入图片描述

更新记录

2022/4/30 修改部分部分、删除多余代码。
2020/4/15 新增sessionStorage 解决刷新后消失问题。

思路

封装NavMenut组件组件及Tabs组件
用 vuex 作为组件之间传值
router-view 放入 Tabs组件内
使用使用 Array.prototype.some()方法
- 为了防止用户多次点击添加做一个判断的值
- 用 Array.prototype.some() 实现 Array.prototype.includes()

具体代码

具体思路和一些要点请看注释

aside.vue(侧边栏组件)

个人建议将 submenu 和 menu所需参数写成数据

<template>
  <div class="zgz-admin-index-aside">
    <el-col :span="24">
      <div class="zgz-shop-avatar-name">
        <img class="avatar" src="~_img/timg.png" alt="追光者Aaron" />
        <p class="name">追光者Aaron</p>
      </div>
      <!--
		:default-active="$route.name" 
        获取router路由的name 对应menu-item内的index
		为了对应 tabs 的跳转点击 做选中
	  -->
      <el-menu
        :default-active="$route.name" 
        class="el-menu-vertical-demo""
        background-color="#545c64"
        text-color="#fff"
        active-text-color="#ffd04b"
      >
        <!-- 循环数据格式 -->
        <el-submenu :index="`${index}`" v-for="(menu,index) in menuList" :key="index">
          <template slot="title">
            <i :class="menu.icont"></i>
            <span>{{menu.name}}</span>
          </template>
          <el-menu-item-group>
            <el-menu-item :index="item.routeName" v-for="item in menu.menuItem" :key="item.index" @click="handleOpen2(item)">{{item.name}}</el-menu-item>
          </el-menu-item-group>
        </el-submenu>
      </el-menu>
    </el-col>
  </div>
</template>

<script>
import { mapActions } from 'vuex'
export default {
  name: 'zgz-admin-index-aside',
  components: {},
  data() {
    return {
      // 将所需submenu,menu和tabs所需参数写成数据格式
      menuList: [
        {
          icont: 'el-icon-s-tools',
          name: '商店设置',
          menuItem: [
            {
              title: '设置',
              routeName: 'Setting',
              name: '设置'
            },
            {
              title: '小程序广告图',
              routeName: 'WxAd',
              name: '小程序广告图'
            }
          ]
        },
        {
          icont: 'el-icon-s-order',
          name: '订单',
          menuItem: [
            {
              title: '订单管理',
              routeName: 'orderList',
              name: '订单管理'
            }
          ]
        }
      ]
    };
  },
  created() {},
  mounted() {},
  methods: {
    // 调用 注册vuex内注册的editableTabs方法
    ...mapActions({
      handleOpen2:'editableTabs'
    })
  }
};
</script>

tabs.vue

element 官方组件方法及方法没有注释

<template>
  <div class="">
    <el-tabs v-model="editableTabsValue" type="card" closable @tab-remove="removeTab" @tab-click="event => $router.push({ name: event.name })">
      <el-tab-pane :key="item.name" v-for="item in editableTabs" :label="item.title" :name="item.name" />
    </el-tabs>
    <router-view />
    <!-- 放入router-view -->
  </div>
</template>

<script>
import { mapMutations, mapGetters } from 'vuex';
export default {
  data() {
    return {};
  },
  created() {
    // 刷新加载sessionStorage存着地址
    if (sessionStorage.getItem('tabsPage')) {
      const TabsValue = sessionStorage.getItem('TabsValue');
      this.SET_TABS_PAGE(JSON.parse(sessionStorage.getItem('tabsPage')));
      this.SET_TABS_VALUE(TabsValue);
      this.$router.push({ name: TabsValue });
    }
  },
  computed: {
    ...mapGetters(['tabsPage', 'TabsValue']),
    // 监听vuex保存的数据
    editableTabs: {
      get() {
        return this.tabsPage;
      },
      set(val) {
        this.SET_TABS_PAGE(val);
      },
    },
    editableTabsValue: {
      get() {
        return this.TabsValue;
      },
      set(val) {
        this.SET_TABS_VALUE(val);
      },
    },
  },
  methods: {
    ...mapMutations(['SET_TABS_PAGE', 'SET_TABS_VALUE']),
    removeTab(targetName) {
      const { editableTabs: tabs, editableTabsValue } = this;
      let activeName = editableTabsValue;
      if (activeName === targetName) {
        tabs.forEach((tab, index) => {
          if (tab.name === targetName) {
            const nextTab = tabs[index + 1] || tabs[index - 1];
            if (nextTab) activeName = nextTab.name;
          }
        });
      }
      this.editableTabsValue = activeName;
      this.editableTabs = tabs.filter(tab => tab.name !== targetName);
      // 删除时跳转不在停留被删除页
      this.$router.push({ name: activeName });
    },
  },
};
</script>

vuex（store.js）

重点来了！！！！

import Vue from 'vue';
import Vuex from 'vuex';
// 引入 router 在vuex内使用router跳转
import router from '@/router';

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    // 定义tabs 所需参数
    tabsPage: [],
    TabsValue: '',
  },
  getters: {
    tabsPage(state) {
      return state.tabsPage;
    },
    TabsValue(state) {
      return state.TabsValue;
    },
  },
  mutations: {
    SET_TABS_PAGE: (state, tabsPage) => {
      state.tabsPage = tabsPage;
      // 防止刷新后没有
      window.sessionStorage.setItem('tabsPage', JSON.stringify(tabsPage));
    },
    SET_TABS_VALUE: (state, TabsValue) => {
      state.TabsValue = TabsValue;
      // 防止刷新后没有
      window.sessionStorage.setItem('TabsValue', TabsValue);
    },
  },
  actions: {
    // 注册方法
    editableTabs({ commit, state }, tabItem) {
      // 浅拷贝 state.tabsPage
      const tabs = [...state.tabsPage];
      // 结构tabItem
      const { name, routeName } = tabItem;
      // 判断数组内是否为空
      if (tabs.length !== 0) {
        /*  使用 Array.some 去判断是否存在对象信息
         * even方法 如果对象存在返回true,不存在则返回flase
         */
        const even = obj => tabs.some(item => item.name === routeName);
        if (!even(tabItem)) {
          // 将tabs所需参数push进arr数组
          tabs.push({ title: name, name: routeName });
          // 赋值给tabsPage参数
          commit('SET_TABS_PAGE', tabs);
        }
      } else {
        // 如果为0
        // 将tabs所需参数push进arr数组
        tabs.push({ title: name, name: routeName });
        // 赋值给tabsPage参数
        commit('SET_TABS_PAGE', tabs);
      }
      // 赋值给TabsValue参数
      commit('SET_TABS_VALUE', tabItem.routeName);
      // 跳转
      router.push({ name: tabItem.routeName });
    },
  },
});

app.vue

<template>
  <div class="admin">
    <el-container>
      <el-aside width="300px">
        <zgz-aside></zgz-aside> <!-- 我是侧边栏 -->
      </el-aside>
      <el-container>
        <el-header>
          <zgz-header></zgz-header>
        </el-header>
        <el-main>
          <zgz-tabs></zgz-tabs> <!-- 我是tabs组件 -->
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>