<script setup>
import {useTagViewStore} from "@/pinia/modules/main.js";
import {useRouter} from "vue-router";
let tagViewStore = useTagViewStore()
let router = useRouter()
const itemClicked = (path) => {
router.push({path: path})
}
const itemClosed = (routerObj, index) => {
let replacePath
let tagViewLength = tagViewStore.tagViews.length
if (tagViewLength <= 1) {
replacePath = '/admin'
} else {
replacePath = tagViewStore.tagViews[index < tagViewLength - 1 ? index + 1 : index - 1].path
}
tagViewStore.delTagView(routerObj)
router.replace({path: replacePath})
}
// routerTo(routerObj.fullPath)
// closeTagView(routerObj,index)
</script>
<template>
<div style="padding-top: 0.3rem;margin-bottom: 0.3rem;height: 2.2rem;background-color: rgb(41 41 41)">
<!-- <el-tag v-for="(routerObj,index) in tagViewStore.tagViews"-->
<!-- closable-->
<!-- style="cursor: pointer;user-select: none"-->
<!-- :effect="routerObj.fullPath===router.currentRoute.value.path?'dark':'light'"-->
<!-- size="large"-->
<!-- :disable-transitions="false"-->
<!-- @click="itemClicked(routerObj.fullPath)"-->
<!-- @close="itemClosed(routerObj,index)">-->
<!-- <!– <router-link :to="" active-class="tagViewActive"></router-link>–>-->
<!-- {{ routerObj.meta.title }}-->
<!-- </el-tag>-->
<el-scrollbar>
<div style="display: flex;flex-direction: row">
<div class="item-style"
>
<div style="font-size: 0.8rem;padding-right: 2rem;margin-left: 0.6rem;color: white">
首页
</div>
</div>
<div v-for="(routerObj,index) in tagViewStore.tagViews"
@click="itemClicked(routerObj.fullPath)"
class="item-style"
:class="{'aaa':routerObj.fullPath===router.currentRoute.value.path,'bbb':routerObj.fullPath!==router.currentRoute.value.path}"
>
<div style="font-size: 0.8rem;padding-right: 2rem;margin-left: 0.6rem">
{{ routerObj.meta.title }}
</div>
<el-icon @click.stop="itemClosed(routerObj,index)" class="close-icon">
<Close/>
</el-icon>
</div>
</div>
</el-scrollbar>
</div>
</template>
<style scoped lang="scss">
.el-tag + .el-tag {
margin-left: 0.4rem;
}
.aaa {
background-image: linear-gradient(to top, #ffffff 0%, #ffffff 100%);
color: black;
height: 2rem;
border-top-left-radius: 8px;
border-top-right-radius: 8px
}
.aaa .close-icon{
color: black;
}
.bbb {
background-image: linear-gradient(to top, #4481eb 0%, #04befe 100%);
color: #ffffff;
height: 1.65rem;
border-radius: 30px;
}
.bbb:hover {
background-image: linear-gradient(to top, #88b2fd 0%, #2fc9ff 100%);
}
.close-icon {
padding: 0.2rem;
font-size: 0.8rem;
color: white;
margin-right: 0.4rem;
border-radius: 50%;
}
.close-icon:hover {
color: white;
background-color: #0094dd;
}
.item-style {
margin-top: 0.4rem;
user-select: none;
display: flex;
justify-content: center;
align-items: center;
//padding-left: 0.6rem;
//padding-right: 0.6rem;
cursor: pointer;
margin-left: 0.2rem;
margin-right: 0.2rem;
}
</style>
统一放在一个容器里,然后这个容器是滚动条还是换行都可以。
这里也可以用 menu 什么的