From 6a18e063394a1fdf1b4c7e0a3498b85a988221b9 Mon Sep 17 00:00:00 2001 From: 刘元博 <1553592282@qq.com> Date: 星期一, 17 四月 2023 18:52:46 +0800 Subject: [PATCH] 去除element滚动条 --- ruoyi-ui/src/layout/components/TagsView/ScrollPane.vue | 188 +++++++++++++++++++++++----------------------- 1 files changed, 94 insertions(+), 94 deletions(-) diff --git a/ruoyi-ui/src/layout/components/TagsView/ScrollPane.vue b/ruoyi-ui/src/layout/components/TagsView/ScrollPane.vue index c110bf1..f92d99b 100644 --- a/ruoyi-ui/src/layout/components/TagsView/ScrollPane.vue +++ b/ruoyi-ui/src/layout/components/TagsView/ScrollPane.vue @@ -1,94 +1,94 @@ -<template> - <el-scrollbar ref="scrollContainer" :vertical="false" class="scroll-container" @wheel.native.prevent="handleScroll"> - <slot /> - </el-scrollbar> -</template> - -<script> -const tagAndTagSpacing = 4 // tagAndTagSpacing - -export default { - name: 'ScrollPane', - data() { - return { - left: 0 - } - }, - computed: { - scrollWrapper() { - return this.$refs.scrollContainer.$refs.wrap - } - }, - mounted() { - this.scrollWrapper.addEventListener('scroll', this.emitScroll, true) - }, - beforeDestroy() { - 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="scss" scoped> -.scroll-container { - white-space: nowrap; - position: relative; - overflow: hidden; - width: 100%; - ::v-deep { - .el-scrollbar__bar { - bottom: 0px; - } - .el-scrollbar__wrap { - height: 49px; - } - } -} -</style> +<template> + <el-scrollbar ref="scrollContainer" :vertical="false" class="scroll-container" @wheel.native.prevent="handleScroll"> + <slot /> + </el-scrollbar> +</template> + +<script> +const tagAndTagSpacing = 4 // tagAndTagSpacing + +export default { + name: 'ScrollPane', + data() { + return { + left: 0 + } + }, + computed: { + scrollWrapper() { + return this.$refs.scrollContainer.$refs.wrap + } + }, + mounted() { + this.scrollWrapper.addEventListener('scroll', this.emitScroll, true) + }, + beforeDestroy() { + 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="scss" scoped> +.scroll-container { + white-space: nowrap; + position: relative; + overflow: hidden; + width: 100%; + ::v-deep { + .el-scrollbar__bar { + bottom: 0px; + } + .el-scrollbar__wrap { + height: 39px; + } + } +} +</style> -- Gitblit v1.9.2