From b9bd29a1a81f6f7de479e3cc3fdfe3d85fc660bf Mon Sep 17 00:00:00 2001
From: he wei <858544502@qq.com>
Date: 星期三, 23 四月 2025 13:35:06 +0800
Subject: [PATCH] UA 整理提交
---
src/layout/components/TagsView/ScrollPane.vue | 177 +++++++++++++++++++++++++++++++---------------------------
1 files changed, 95 insertions(+), 82 deletions(-)
diff --git a/src/layout/components/TagsView/ScrollPane.vue b/src/layout/components/TagsView/ScrollPane.vue
index 29a9d2c..4749a39 100644
--- a/src/layout/components/TagsView/ScrollPane.vue
+++ b/src/layout/components/TagsView/ScrollPane.vue
@@ -1,86 +1,84 @@
+<script setup name="ScrollPane">
+import { ref, computed, onMounted, onBeforeUnmount, nextTick } from "vue";
+
+const $emit = defineEmits(["scroll"]);
+const tagAndTagSpacing = 0; // tagAndTagSpacing
+const left = ref(0);
+const scrollContainer = ref();
+const props = defineProps({
+ tagRefs: {
+ type: Array,
+ default: () => [],
+ },
+});
+
+const wrap = computed(() => {
+ return scrollContainer.value.wrapRef;
+});
+
+function handleScroll(e) {
+ const eventDelta = e.wheelDelta || -e.deltaY * 40;
+ scrollContainer.value.scrollLeft = wrap.scrollLeft + eventDelta / 4;
+}
+function emitScroll() {
+ $emit("scroll");
+}
+function moveToTarget(currentTag) {
+ // const $container = $refs.scrollContainer.$el;
+ const $container = scrollContainer.value.$el;
+ const $containerWidth = $container.offsetWidth;
+ // const $scrollWrapper = scrollWrapper;
+ const $scrollWrapper = scrollContainer.value;
+ // const tagList = $parent.$refs.tag;
+ const tagList = props.tagRefs;
+
+ let firstTag = null;
+ let lastTag = null;
+
+ // find first tag and last tag
+ if (tagList.length > 0) {
+ firstTag = tagList[0];
+ lastTag = tagList[tagList.length - 1];
+ }
+
+ if (firstTag === currentTag) {
+ $scrollWrapper.scrollLeft = 0;
+ } else if (lastTag === currentTag) {
+ $scrollWrapper.scrollLeft = $scrollWrapper.scrollWidth - $containerWidth;
+ } else {
+ // find preTag and nextTag
+ const currentIndex = tagList.findIndex((item) => item === currentTag);
+ const prevTag = tagList[currentIndex - 1];
+ const nextTag = tagList[currentIndex + 1];
+
+ // the tag's offsetLeft after of nextTag
+ const afterNextTagOffsetLeft =
+ nextTag.$el.offsetLeft + nextTag.$el.offsetWidth + tagAndTagSpacing;
+
+ // the tag's offsetLeft before of prevTag
+ const beforePrevTagOffsetLeft = prevTag.$el.offsetLeft - tagAndTagSpacing;
+
+ if (afterNextTagOffsetLeft > $scrollWrapper.scrollLeft + $containerWidth) {
+ $scrollWrapper.scrollLeft = afterNextTagOffsetLeft - $containerWidth;
+ } else if (beforePrevTagOffsetLeft < $scrollWrapper.scrollLeft) {
+ $scrollWrapper.scrollLeft = beforePrevTagOffsetLeft;
+ }
+ }
+}
+defineExpose({
+ moveToTarget,
+});
+</script>
<template>
- <el-scrollbar ref="scrollContainer" :vertical="false" class="scroll-container" @wheel.prevent="handleScroll">
+ <el-scrollbar
+ ref="scrollContainer"
+ :vertical="false"
+ class="scroll-container"
+ >
+ <!-- @wheel.prevent="handleScroll" -->
<slot />
</el-scrollbar>
</template>
-
-<script>
-import { defineComponent } from 'vue';
-
-const tagAndTagSpacing = 4; // tagAndTagSpacing
-
-export default defineComponent({
- name: 'ScrollPane',
- data() {
- return {
- left: 0
- };
- },
- computed: {
- scrollWrapper() {
- return this.$refs.scrollContainer.$refs.wrapRef;
- }
- },
- mounted() {
- if (this.scrollWrapper) {
- this.scrollWrapper.addEventListener('scroll', this.emitScroll, true);
- }
- },
- beforeUnmount() {
- if (this.scrollWrapper) {
- this.scrollWrapper.removeEventListener('scroll', this.emitScroll);
- }
- },
- methods: {
- handleScroll(e) {
- const eventDelta = e.wheelDelta || -e.deltaY * 40;
- const $scrollWrapper = this.scrollWrapper;
- $scrollWrapper.scrollLeft = $scrollWrapper.scrollLeft + eventDelta / 4;
- },
- emitScroll() {
- this.$emit('scroll');
- },
- moveToTarget(currentTag) {
- const $container = this.$refs.scrollContainer.$el;
- const $containerWidth = $container.offsetWidth;
- const $scrollWrapper = this.scrollWrapper;
- const tagList = this.$parent.$refs.tag;
-
- let firstTag = null;
- let lastTag = null;
-
- // find first tag and last tag
- if (tagList.length > 0) {
- firstTag = tagList[0];
- lastTag = tagList[tagList.length - 1];
- }
-
- if (firstTag === currentTag) {
- $scrollWrapper.scrollLeft = 0;
- } else if (lastTag === currentTag) {
- $scrollWrapper.scrollLeft = $scrollWrapper.scrollWidth - $containerWidth;
- } else {
- // find preTag and nextTag
- const currentIndex = tagList.findIndex(item => item === currentTag);
- const prevTag = tagList[currentIndex - 1];
- const nextTag = tagList[currentIndex + 1];
-
- // the tag's offsetLeft after of nextTag
- const afterNextTagOffsetLeft = nextTag.$el.offsetLeft + nextTag.$el.offsetWidth + tagAndTagSpacing;
-
- // the tag's offsetLeft before of prevTag
- const beforePrevTagOffsetLeft = prevTag.$el.offsetLeft - tagAndTagSpacing;
-
- if (afterNextTagOffsetLeft > $scrollWrapper.scrollLeft + $containerWidth) {
- $scrollWrapper.scrollLeft = afterNextTagOffsetLeft - $containerWidth;
- } else if (beforePrevTagOffsetLeft < $scrollWrapper.scrollLeft) {
- $scrollWrapper.scrollLeft = beforePrevTagOffsetLeft;
- }
- }
- }
- }
-});
-</script>
<style lang="less" scoped>
.scroll-container {
@@ -88,13 +86,28 @@
position: relative;
overflow: hidden;
width: 100%;
-
:deep(.el-scrollbar__bar) {
bottom: 0px;
}
-
:deep(.el-scrollbar__wrap) {
- height: 49px;
+ overflow-x: hidden;
}
}
+
+.scroll-container::-webkit-scrollbar {
+ height: 0;
+}
+
+.scroll-container::-webkit-scrollbar-thumb {
+ /* 婊氬姩鏉￠噷闈㈠皬鏂瑰潡 */
+ border-radius: 10px;
+ -webkit-box-shadow: none;
+ background: none;
+}
+.scroll-container::-webkit-scrollbar-track {
+ /* 婊氬姩鏉￠噷闈㈣建閬� */
+ -webkit-box-shadow: none;
+ border-radius: 10px;
+ background: none;
+}
</style>
--
Gitblit v1.9.1