fix: 删除滚动支持

This commit is contained in:
xiaoxian521 2021-11-20 11:09:52 +08:00
parent b1b236f736
commit c3645fd760
2 changed files with 6 additions and 22 deletions

View File

@ -124,12 +124,6 @@
} }
} }
} }
.scrollbar-wrapper {
position: absolute;
height: 40px;
overflow-x: hidden !important;
}
} }
.right-button { .right-button {

View File

@ -40,12 +40,7 @@ import { useRoute, useRouter } from "vue-router";
import { handleAliveRoute, delAliveRoutes } from "/@/router"; import { handleAliveRoute, delAliveRoutes } from "/@/router";
import { usePermissionStoreHook } from "/@/store/modules/permission"; import { usePermissionStoreHook } from "/@/store/modules/permission";
import { toggleClass, removeClass, hasClass } from "/@/utils/operate"; import { toggleClass, removeClass, hasClass } from "/@/utils/operate";
import { import { RouteConfigs, relativeStorageType, tagsViewsType } from "../../types";
RouteConfigs,
relativeStorageType,
tagsViewsType,
scrollbarDomType
} from "../../types";
const route = useRoute(); const route = useRoute();
const router = useRouter(); const router = useRouter();
@ -57,11 +52,11 @@ let relativeStorage: relativeStorageType;
const showTags = ref(storageLocal.getItem("tagsVal") || false); const showTags = ref(storageLocal.getItem("tagsVal") || false);
const tabDom = templateRef<HTMLElement | null>("tabDom", null); const tabDom = templateRef<HTMLElement | null>("tabDom", null);
const containerDom = templateRef<HTMLElement | null>("containerDom", null); const containerDom = templateRef<HTMLElement | null>("containerDom", null);
const scrollbarDom = templateRef<scrollbarDomType>("scrollbarDom", null); const scrollbarDom = templateRef<HTMLElement | null>("scrollbarDom", null);
const handleScroll = (offset: number): void => { const handleScroll = (offset: number): void => {
const scrollbarDomWidth = scrollbarDom.value?.wrap const scrollbarDomWidth = scrollbarDom.value
? scrollbarDom.value?.wrap.offsetWidth ? scrollbarDom.value?.offsetWidth
: 0; : 0;
const tabDomWidth = tabDom.value ? tabDom.value.offsetWidth : 0; const tabDomWidth = tabDom.value ? tabDom.value.offsetWidth : 0;
if (offset > 0) { if (offset > 0) {
@ -498,12 +493,7 @@ onBeforeMount(() => {
<template> <template>
<div ref="containerDom" class="tags-view" v-if="!showTags"> <div ref="containerDom" class="tags-view" v-if="!showTags">
<i class="ri-arrow-left-s-line" @click="handleScroll(200)"></i> <i class="ri-arrow-left-s-line" @click="handleScroll(200)"></i>
<el-scrollbar <div ref="scrollbarDom" class="scroll-container">
tag="span"
ref="scrollbarDom"
wrap-class="scrollbar-wrapper"
class="scroll-container"
>
<div <div
class="tab" class="tab"
ref="tabDom" ref="tabDom"
@ -544,7 +534,7 @@ onBeforeMount(() => {
></div> ></div>
</div> </div>
</div> </div>
</el-scrollbar> </div>
<i class="ri-arrow-right-s-line" @click="handleScroll(-200)"></i> <i class="ri-arrow-right-s-line" @click="handleScroll(-200)"></i>
<!-- 右键菜单按钮 --> <!-- 右键菜单按钮 -->
<transition name="el-zoom-in-top"> <transition name="el-zoom-in-top">