tongtong/vue3-element-admin
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor(ScollPane.vue): ts语法警告修复

Browse Source
This commit is contained in:
郝先瑞
2022-01-01 16:02:09 +08:00
parent d727617b0e
commit 647efbe6df
1 changed files with 11 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
src/layout/components/TagsView/ScrollPane.vue
View File

@@ -10,15 +10,16 @@
<script setup lang="ts"> <script setup lang="ts">
import {ref, computed, onMounted, onBeforeUnmount, getCurrentInstance} from "vue"; import {ref, computed, onMounted, onBeforeUnmount, getCurrentInstance} from "vue";
import {tagsViewStoreHook} from "@store/modules/tagsView" import {tagsViewStoreHook} from "@/store/modules/tagsView"
import {TagView} from "@store/interface";
const emits = defineEmits()
const tagAndTagSpacing = ref(4) const tagAndTagSpacing = ref(4)
const scrollContainerRef = ref(null) const scrollContainerRef = ref(null)
const visitedViews = computed(() => tagsViewStoreHook().visitedViews)
const emits = defineEmits()
const emitScroll = () => { const emitScroll = () => {
emits('scroll') (emits as any)('scroll')
} }
const {ctx} = getCurrentInstance() as any const {ctx} = getCurrentInstance() as any
@@ -40,7 +41,7 @@ function handleScroll(e: WheelEvent) {
scrollWrapper.value.scrollLeft = scrollWrapper.value.scrollLeft + eventDelta / 4 scrollWrapper.value.scrollLeft = scrollWrapper.value.scrollLeft + eventDelta / 4
} }
function moveToTarget(currentTag) { function moveToTarget(currentTag:TagView) {
const $container = ctx.$refs.scrollContainer.$el const $container = ctx.$refs.scrollContainer.$el
const $containerWidth = $container.offsetWidth const $containerWidth = $container.offsetWidth
const $scrollWrapper = scrollWrapper.value; const $scrollWrapper = scrollWrapper.value;
@@ -65,20 +66,20 @@ function moveToTarget(currentTag) {
let nextTag = null let nextTag = null
for (const k in tagListDom) { for (const k in tagListDom) {
if (k !== 'length' && Object.hasOwnProperty.call(tagListDom, k)) { if (k !== 'length' && Object.hasOwnProperty.call(tagListDom, k)) {
if (tagListDom[k].dataset.path === visitedViews.value[currentIndex - 1].path) { if ((tagListDom[k] as any).dataset.path === visitedViews.value[currentIndex - 1].path) {
prevTag = tagListDom[k]; prevTag = tagListDom[k] ;
} }
if (tagListDom[k].dataset.path === visitedViews.value[currentIndex + 1].path) { if ((tagListDom[k] as any).dataset.path === visitedViews.value[currentIndex + 1].path) {
nextTag = tagListDom[k]; nextTag = tagListDom[k];
} }
} }
} }
// the tag's offsetLeft after of nextTag // the tag's offsetLeft after of nextTag
const afterNextTagOffsetLeft = nextTag.offsetLeft + nextTag.offsetWidth + tagAndTagSpacing.value const afterNextTagOffsetLeft = (nextTag as any).offsetLeft + (nextTag as any).offsetWidth + tagAndTagSpacing.value
// the tag's offsetLeft before of prevTag // the tag's offsetLeft before of prevTag
const beforePrevTagOffsetLeft = prevTag.offsetLeft - tagAndTagSpacing.value const beforePrevTagOffsetLeft = (prevTag as any).offsetLeft - tagAndTagSpacing.value
if (afterNextTagOffsetLeft > $scrollWrapper.scrollLeft + $containerWidth) { if (afterNextTagOffsetLeft > $scrollWrapper.scrollLeft + $containerWidth) {
$scrollWrapper.scrollLeft = afterNextTagOffsetLeft - $containerWidth $scrollWrapper.scrollLeft = afterNextTagOffsetLeft - $containerWidth
} else if (beforePrevTagOffsetLeft < $scrollWrapper.scrollLeft) { } else if (beforePrevTagOffsetLeft < $scrollWrapper.scrollLeft) {