rax-medical/src/components/page-tabs.vue

<template>
    <div class="page-tabs">
        <div class="tabs-item" v-for="(item, index) in tabs" :key="index" :class="{'active': tabActive === item.path}" @click="tabClick(item)">{{ item.name }}</div>
    </div>
</template>

<script lang='ts' setup>
import { onMounted, reactive, ref, toRefs, watch } from 'vue'
import type { MenuItem } from '@/utils/public-interface'
import { useRouter } from 'vue-router'

const router = useRouter()

const tabs = ref([] as Array<MenuItem>)
const tabActive = ref('')

defineExpose({
    setTab
})

function setTab(e: MenuItem) {
    if(!e) return
    tabActive.value = e.path
    if(!tabs.value.some((o: MenuItem) => o.path === e.path)) {
        tabs.value.push(e)
    }
}

const tabClick = (e: MenuItem) => {
    setTab(e)
    router.push(e.path)
}


</script>

<style lang='scss' scoped>
.page-tabs {
    width: 100%;
    height: 100%;
    display: flex;
    background: white;
    border-top: 1px solid $border-color;
    .tabs-item {
        cursor: pointer;
        width: auto;
        height: 100%;
        padding: 0 20px;
        display: flex;
        align-items: center;
        transition: background .6s;
        &:hover {
            color: $main-color;
            background: #f2f3f5;
            transition: background .6s;
        }
        &.active {
            color: $main-color;
            background: #f2f3f5;
            font-weight: 600;
            transition: background .6s;
        }
    }
}
</style>