vue项目: 布局组件开发-TabView

14_Vue项目/day-3/vue2-shop/src/layout/components/TabView.vue

@@ -0,0 +1,44 @@
+<template>
+  <el-tabs type="card" closable v-model="activedTab">
+    <el-tab-pane
+      :key="item.name"
+      v-for="item in tabs"
+      :label="item.label"
+      :name="item.name"
+    >
+    </el-tab-pane>
+  </el-tabs>
+</template>
+
+<script>
+import { mapState, mapMutations } from 'vuex';
+export default {
+  name: 'TabView',
+  computed: {
+    activedTab: {
+      // this.activedTab
+      get() {
+        return this.$store.state.system.activedTabValue;
+      }, // 读取计算属性时 执行
+      // this.activedTab = '2'
+      set(tabName) {
+        this.setActivedTab(tabName);
+      }, // 修改计算属性时 执行
+    },
+    ...mapState('system', ['tabs']),
+  },
+  methods: {
+    ...mapMutations('system', ['setActivedTab', 'deleteTab']),
+  },
+};
+</script>
+
+<style scoped>
+.el-tabs ::v-deep .el-tabs__header {
+  margin: 0;
+}
+
+.el-tabs--card ::v-deep .el-tabs__header .el-tabs__item.is-active {
+  border-bottom-color: #e4e7ed;
+}
+</style>

14_Vue项目/day-3/vue2-shop/src/layout/index.vue

@@ -9,7 +9,10 @@
       </el-aside>
       <el-main>
         <!-- TabView -->
-        <router-view />
+        <TabView />
+        <div :style="{ padding: '0 16px 16px' }">
+          <router-view />
+        </div>
       </el-main>
     </el-container>
   </el-container>
@@ -18,11 +21,14 @@
 <script>
 import AppHeader from './components/AppHeader.vue';
 import AppMenu from './components/AppMenu.vue';
+import TabView from './components/TabView.vue';
+
 export default {
   name: 'Layout',
   components: {
     AppHeader,
     AppMenu,
+    TabView,
   },
 };
 </script>
@@ -35,4 +41,8 @@ export default {
   min-height: calc(100vh - 60px);
   background-color: #353743;
 }
+
+.el-main {
+  padding: 0;
+}
 </style>

14_Vue项目/day-3/vue2-shop/src/store/index.js

@@ -1,5 +1,7 @@
-import Vue from "vue";
-import Vuex from "vuex";
+import Vue from 'vue';
+import Vuex from 'vuex';
+
+import systemModule from './modules/system';
 
 Vue.use(Vuex);
 
@@ -8,5 +10,7 @@ export default new Vuex.Store({
   getters: {},
   mutations: {},
   actions: {},
-  modules: {},
+  modules: {
+    system: systemModule,
+  },
 });

14_Vue项目/day-3/vue2-shop/src/store/modules/system.js

@@ -0,0 +1,18 @@
+export default {
+  namespaced: true,
+  state: {
+    activedTabValue: '1', // 选中tab的标识
+    tabs: [
+      { label: '用户管理', name: '1' },
+      { label: '角色管理', name: '2' },
+    ], // 所有tab对象 {label: '用户管理',name:'id值'}
+  },
+  mutations: {
+    setActivedTab(state, tabName) {
+      state.activedTabValue = tabName;
+    },
+    deleteTab(state, tabName) {
+      state.tabs = state.tabs.filter((tab) => tab.name !== tabName);
+    },
+  },
+};