117 lines
3.1 KiB
Vue
117 lines
3.1 KiB
Vue
<template>
|
||
<div class="div_">
|
||
<el-scrollbar ref="scrollbar" :vertical="false" class="scrollbar_" @wheel.native.prevent="handleScroll">
|
||
<el-tag
|
||
size="large"
|
||
v-for="(item, index) in routerHistory"
|
||
:key="index"
|
||
:closable="true"
|
||
:type="nowRouter == item.path ? '' : 'info'"
|
||
@close="removeTag(item.path)"
|
||
@click="tagClick(item.path, index)"
|
||
>
|
||
{{ item.title }}
|
||
</el-tag>
|
||
</el-scrollbar>
|
||
</div>
|
||
</template>
|
||
<script setup>
|
||
import { storeToRefs } from 'pinia'
|
||
import { ref, watch, onMounted, nextTick } from 'vue'
|
||
import { useRouter, useRoute } from 'vue-router'
|
||
import { useUserStore } from '@/stores/user.js'
|
||
const userStore = useUserStore() //store对象
|
||
const { routerHistory } = storeToRefs(userStore) //路由记录
|
||
const { nowRouter } = storeToRefs(userStore) //当前路由路径
|
||
const route = useRoute() //当前路由对象
|
||
const router = useRouter() //路由对象
|
||
const scrollbar = ref(null)
|
||
// 监听路由变动
|
||
watch(
|
||
() => router.currentRoute.value,
|
||
(newValue, oldValue) => {
|
||
// 变动后更新路由
|
||
nowRouter.value = newValue.path
|
||
userStore.setNowRouter(newValue.path)
|
||
},
|
||
{ immediate: true },
|
||
)
|
||
onMounted(() => {
|
||
let nowRouterIndex = routerHistory.value.findIndex(item => item.path == nowRouter)
|
||
//在页面渲染完成后调用计算滚动条位置
|
||
nextTick(() => {
|
||
countSroll(nowRouterIndex)
|
||
})
|
||
})
|
||
|
||
// 移除标签的事件
|
||
const removeTag = routerPath => {
|
||
if (routerHistory.value.length == 1) {
|
||
return
|
||
}
|
||
// 删除tag返回新路由历史数组并存入vuex
|
||
let newArr = routerHistory.value.filter(item => item.path !== routerPath)
|
||
userStore.setRouterHistory(newArr)
|
||
// 如果删除的路由是当前路由，路由跳转至目前路由历史数组最后一个路由
|
||
if (route.path == routerPath) {
|
||
router.push({
|
||
path: newArr[newArr.length - 1].path,
|
||
})
|
||
}
|
||
}
|
||
// 点击标签的事件
|
||
const tagClick = (path, index) => {
|
||
countSroll(index)
|
||
router.push(path)
|
||
}
|
||
// 标签滚定的事件
|
||
const countSroll = index => {
|
||
// // 获取tag宽度
|
||
// let tagWidth = this.$refs['tag' + index][0].$el.offsetWidth;
|
||
// // 获取tag距离右边宽度
|
||
// let tagMargin = this.$refs['tag' + index][0].$el.offsetLeft;
|
||
// // 获取sroll宽度
|
||
// let srollWidth = this.$refs.scrollbar.$el.offsetWidth;
|
||
// // 如果tag距离右边+tag宽度+20左右已经大于sroll宽度，表示tag已经到了尽头了
|
||
// if ((tagMargin + tagWidth + 20) > srollWidth) {
|
||
// scrollbar.wrap.scrollLeft = tagMargin
|
||
// } else {
|
||
// scrollbar.wrap.scrollLeft = 0
|
||
// }
|
||
}
|
||
const handleScroll = e => {
|
||
const eventDelta = e.wheelDelta || -e.deltaY * 40
|
||
scrollbar.scrollLeft = scrollbar.scrollLeft + eventDelta / 4
|
||
}
|
||
</script>
|
||
<style lang="scss" scoped>
|
||
.div_ {
|
||
height: 48px;
|
||
padding: 0 15px;
|
||
background-color: #242a2f;
|
||
box-sizing: content-box;
|
||
padding-bottom: 10px;
|
||
|
||
.scrollbar_ {
|
||
height: 100%;
|
||
width: 100%;
|
||
white-space: nowrap;
|
||
|
||
:deep(.el-scrollbar__view) {
|
||
height: 100%;
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
}
|
||
}
|
||
|
||
.el-tag {
|
||
margin-left: 10px;
|
||
cursor: pointer;
|
||
}
|
||
|
||
:first-child {
|
||
margin: 0;
|
||
}
|
||
</style>
|