|
|
@ -1,34 +1,23 @@ |
|
|
|
<template> |
|
|
|
<div class="tab-bar"> |
|
|
|
<div v-for="(tab, index) in tabs" :key="index" :class="['tab-item', { active: currentTab === index }]" |
|
|
|
<div v-for="(tab, index) in tabs" :key="index" :class="['tab-item', { active: currentTab.path === tab.url }]" |
|
|
|
@click="onTabClick(index)"> |
|
|
|
<img class="tab-icon" :src="currentTab === index ? tab.activeIcon : tab.icon"></img> |
|
|
|
<img class="tab-icon" :src="currentTab.path === tab.url ? tab.activeIcon : tab.icon"></img> |
|
|
|
<span class="tab-label">{{ tab.label }}</span> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</template> |
|
|
|
|
|
|
|
<script setup lang="ts"> |
|
|
|
import { ref, onMounted, onActivated } from 'vue' |
|
|
|
import { computed } from 'vue' |
|
|
|
|
|
|
|
|
|
|
|
import { useRouter } from 'vue-router' |
|
|
|
|
|
|
|
const router = useRouter() |
|
|
|
onActivated(() => { |
|
|
|
const savedTab = sessionStorage.getItem('currentTab') |
|
|
|
if (savedTab !== null) { |
|
|
|
currentTab.value = parseInt(savedTab) |
|
|
|
router.push(tabs[currentTab.value].url) |
|
|
|
} |
|
|
|
}) |
|
|
|
onMounted(() => { |
|
|
|
const savedTab = sessionStorage.getItem('currentTab') |
|
|
|
if (savedTab !== null) { |
|
|
|
currentTab.value = parseInt(savedTab) |
|
|
|
router.push(tabs[currentTab.value].url) |
|
|
|
} |
|
|
|
}) |
|
|
|
|
|
|
|
|
|
|
|
const currentTab = computed(() => router.currentRoute.value) |
|
|
|
const tabs = [ |
|
|
|
{ |
|
|
|
label: '耗材', |
|
|
@ -53,14 +42,11 @@ const tabs = [ |
|
|
|
}, |
|
|
|
] |
|
|
|
// 当前激活的 tab 索引,默认从第一个开始 |
|
|
|
const currentTab = ref(0) |
|
|
|
|
|
|
|
const emit = defineEmits(['tabChanged']) |
|
|
|
|
|
|
|
// 监听点击事件,切换选中状态,并跳转路由 |
|
|
|
const onTabClick = (index: any) => { |
|
|
|
currentTab.value = index |
|
|
|
// 保存当前选中的 tab 索引到 sessionStorage |
|
|
|
sessionStorage.setItem('currentTab', index) |
|
|
|
router.push(tabs[index].url) |
|
|
|
} |
|
|
|
</script> |
|
|
|