Переглянути джерело

refactor: 重构sidebar,并修复了刷新时active-tab错位的问题

Jinyao 5 роки тому
батько
коміт
6227e110e7
1 змінених файлів з 20 додано та 23 видалено
  1. 20 23
      src/components/SideBar.vue

+ 20 - 23
src/components/SideBar.vue

@@ -1,35 +1,32 @@
 <template>
   <el-menu :default-active="active" class="side-bar" :collapse="true" :router="true">
-    <el-menu-item index="schedule">
-      <i class="icon" target="schedule"></i>
-    </el-menu-item>
-    <el-menu-item index="taskList">
-      <i class="icon" target="taskList"></i>
-    </el-menu-item>
-    <el-menu-item index="bugList">
-      <i class="icon" target="bugList"></i>
-    </el-menu-item>
-    <!-- <el-menu-item index="statistics">
-      <i class="icon" target="statistics"></i>
-    </el-menu-item> -->
-    <el-menu-item index="pipeline">
-      <i class="icon" target="pipeline"></i>
-    </el-menu-item>
-    <el-menu-item index="database">
-      <i class="icon" target="database"></i>
-    </el-menu-item>
-    <el-menu-item index="apitest">
-      <i class="icon" target="apitest"></i>
-    </el-menu-item>
-    <el-menu-item index="invite">
-      <i class="icon" target="invite"></i>
+    <el-menu-item v-for="tab in sidebar" :index="tab.name" :key="tab.name">
+      <el-tooltip placement="right" :content="tab.description" v-show="!tab.hide">
+        <i class="icon" :target="tab.name"></i>
+      </el-tooltip>
     </el-menu-item>
   </el-menu>
 </template>
 
 <script>
+const sidebar = [
+  { name: 'schedule', description: '项目规划', hide: false },
+  { name: 'taskList', description: '任务列表', hide: false },
+  { name: 'bugList', description: '缺陷列表', hide: false },
+  { name: 'pipeline', description: '流水线与产物', hide: false },
+  { name: 'database', description: '数据库', hide: false },
+  { name: 'apitest', description: '测试', hide: false },
+  { name: 'statistics', description: '详细数据', hide: true },
+  { name: 'invite', description: '项目关联', hide: false },
+];
+
 export default {
   name: 'SideBar',
+  data() {
+    return {
+      sidebar,
+    };
+  },
   computed: {
     active() {
       const li = this.$route.path.split('/');