fix: 关闭其他路由无法切换到当前选中的tag

Former-commit-id: c03db1d1d2216cf9acf4477919cec01f0934f71b
This commit is contained in:
郝先瑞
2022-05-25 23:32:51 +08:00
parent a51d4f9371
commit 7669dc66ed
2 changed files with 20 additions and 21 deletions

View File

@@ -1,6 +1,6 @@
<template> <template>
<el-scrollbar <el-scrollbar
ref="scrollContainerRef" ref="scrollContainer"
:vertical="false" :vertical="false"
class="scroll-container" class="scroll-container"
@wheel.prevent="handleScroll" @wheel.prevent="handleScroll"
@@ -21,24 +21,26 @@ import { TagView } from '@/types';
import useStore from '@/store'; import useStore from '@/store';
const tagAndTagSpacing = ref(4); const tagAndTagSpacing = ref(4);
const scrollContainerRef = ref(null); const { proxy } = getCurrentInstance() as any;
const emits = defineEmits(['scroll']);
const emitScroll = () => {
emits('scroll')
}
const { tagsView } = useStore(); const { tagsView } = useStore();
const visitedViews = computed(() => tagsView.visitedViews); const visitedViews = computed(() => tagsView.visitedViews);
const { ctx } = getCurrentInstance() as any; const scrollWrapper = computed(() => proxy?.$refs.scrollContainer.$refs.wrap$);
const scrollWrapper = computed(() => {
return (scrollContainerRef.value as any).$refs.wrap as HTMLElement;
});
onMounted(() => { onMounted(() => {
//scrollWrapper.value.addEventListener('scroll', emitScroll, true); scrollWrapper.value.addEventListener('scroll', emitScroll, true)
}); })
onBeforeUnmount(() => { onBeforeUnmount(() => {
// scrollWrapper.value.removeEventListener('scroll', emitScroll); scrollWrapper.value.removeEventListener('scroll', emitScroll)
}); })
function handleScroll(e: WheelEvent) { function handleScroll(e: WheelEvent) {
const eventDelta = (e as any).wheelDelta || -e.deltaY * 40; const eventDelta = (e as any).wheelDelta || -e.deltaY * 40;
@@ -47,7 +49,7 @@ function handleScroll(e: WheelEvent) {
} }
function moveToTarget(currentTag: TagView) { function moveToTarget(currentTag: TagView) {
const $container = ctx.$refs.scrollContainer.$el; const $container = proxy.$refs.scrollContainer.$el;
const $containerWidth = $container.offsetWidth; const $containerWidth = $container.offsetWidth;
const $scrollWrapper = scrollWrapper.value; const $scrollWrapper = scrollWrapper.value;

View File

@@ -156,21 +156,17 @@ function addTags() {
} }
function moveToCurrentTag() { function moveToCurrentTag() {
const tags = getCurrentInstance()?.refs.tag as any[];
nextTick(() => { nextTick(() => {
if (tags === null || tags === undefined || !Array.isArray(tags)) { for (const r of visitedViews.value) {
return; if (r.path === route.path) {
} scrollPaneRef.value.moveToTarget(r);
for (const tag of tags) {
if ((tag.to as TagView).path === route.path) {
(scrollPaneRef.value as any).value.moveToTarget(tag);
// when query is different then update // when query is different then update
if ((tag.to as TagView).fullPath !== route.fullPath) { if (r.fullPath !== route.fullPath) {
tagsView.updateVisitedView(route); tagsView.updateVisitedView(route);
} }
} }
} }
}); })
} }
function isActive(tag: TagView) { function isActive(tag: TagView) {
@@ -258,6 +254,7 @@ function closeRightTags() {
} }
function closeOtherTags() { function closeOtherTags() {
router.push(selectedTag.value)
tagsView.delOtherViews(selectedTag.value).then(() => { tagsView.delOtherViews(selectedTag.value).then(() => {
moveToCurrentTag(); moveToCurrentTag();
}); });