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>
|