<template>
    <div class="nav_out">
        <el-tag v-for="(tag,index) in navStore.topNavList" :key="tag.name" size="large"  :effect="navStore.currentNav==tag.path?'dark':'info'"   closable @close="closeNavTagFn(index)" @click="TapNavTagFn(tag)" class="navItem">
            {{ tag.title }}
        </el-tag>
    </div>
</template>
  
<script setup lang="ts">
import {comNavStore} from "store/comNav"
const router = useRouter()
const navStore = comNavStore()
const closeNavTagFn =(index:any)=>{
    navStore.deleteNavTarget(index)
}
const TapNavTagFn=(tag:any)=>{

    router.push({
        name:tag.path
    })
    navStore.addNavTarget(tag)
}
</script>
  
<style scoped lang="scss">
.nav_out{
    height: 48px;
    box-shadow:$ShadowColor;
    display: flex;
    align-items: center;
    padding-left: 12px;
    background-color: #fff;
}
.navItem{
    margin-right:8px;
}

</style>
