最新代码

src/views/header/index.vue

@@ -3,7 +3,7 @@
     <div class="tab flex a-c">
       <div
         class="tab-item"
-        :class="{ active: activeIndex === item.id }"
+        :class="{active: activeIndex === item.id}"
         v-for="item in tabList"
         :key="item.id"
         @click="setActiveIndex(item.id)"
@@ -15,27 +15,32 @@
 </template>
 
 <script>
+import {setStorage, getStorage} from '@/utils/localStorage.js'
+
 export default {
-  name: "",
+  name: '',
   data() {
     return {
       tabList: [
-        { id: 1, label: "机动路线规划" },
-        { id: 2, label: "临时部署驻地分析" },
+        {id: 1, label: '机动路线规划'},
+        {id: 2, label: '临时部署驻地分析'},
       ],
       activeIndex: 1,
-    };
+    }
+  },
+  mounted() {
+    this.activeIndex = getStorage('activeIndex') || 1
   },
-  mounted() {},
   methods: {
     setActiveIndex(id) {
       if (this.activeIndex !== id) {
-        this.activeIndex = id;
-        this.$bus.$emit("setActiveIndex", this.activeIndex);
+        this.activeIndex = id
+        setStorage('activeIndex', id)
+        this.$bus.$emit('setActiveIndex', this.activeIndex)
       }
     },
   },
-};
+}
 </script>
 
 <style lang="scss" scoped>
@@ -55,14 +60,14 @@ $label_height: 50px;
       line-height: $label_height;
       padding: 0 30px;
       margin-right: 20px;
-      font-family: "HarmonyOS Sans";
+      font-family: 'HarmonyOS Sans';
       font-weight: 400;
       font-size: 20px;
       cursor: pointer;
       transition: background 0.3s ease;
 
       &.active {
-        background-image: url("@/assets/image/tab-active.png");
+        background-image: url('@/assets/image/tab-active.png');
         background-size: 100% 100%;
         background-repeat: no-repeat;
       }