diff --git a/Web/src/assets/style/lib/tree-layout.less b/Web/src/assets/style/lib/tree-layout.less index e1f3c1b..e5b2a10 100644 --- a/Web/src/assets/style/lib/tree-layout.less +++ b/Web/src/assets/style/lib/tree-layout.less @@ -27,28 +27,6 @@ } } } - .swiper-container { - position: absolute; - top: @layout-header-height; - left: 0; - bottom: 0; - - width: 100%; - .swiper-slide { - height: auto; - min-height: 100%; - } - .swiper-scrollbar { - transition: @animation-duration-slow opacity; - - opacity: 0; - } - &:hover { - .swiper-scrollbar { - opacity: 1; - } - } - } } &--bar { line-height: 20px; @@ -66,4 +44,29 @@ } } } + &--content { + position: absolute; + top: @layout-header-height; + left: 0; + bottom: 0; + + overflow-y: auto; + + width: 100%; + &::-webkit-scrollbar { + width: 5px; + height: 5px; + + background-color: @white; + } + &::-webkit-scrollbar-thumb { + background-color: transparent; + } + &:hover::-webkit-scrollbar-thumb { + background-color: fade(@black, 30%); + } + &::-webkit-scrollbar-thumb:active { + background-color: fade(@black, 45%); + } + } } diff --git a/Web/src/components/yoTreeLayout/index.js b/Web/src/components/yoTreeLayout/index.js index fdd4932..24b88a8 100644 --- a/Web/src/components/yoTreeLayout/index.js +++ b/Web/src/components/yoTreeLayout/index.js @@ -1,6 +1,4 @@ -import Swiper from 'swiper' - -let timer, swiper +let timer export default { props: { @@ -45,28 +43,6 @@ export default { this.onLoadData() }, - mounted() { - const container = this.$refs.swiper, - scrollBar = container.querySelector('.swiper-scrollbar') - - const swiperOptions = { - direction: 'vertical', - slidesPerView: 'auto', - freeMode: true, - scrollbar: { - el: scrollBar, - }, - mousewheel: true, - } - - swiper = new Swiper(container, swiperOptions) - - window.addEventListener('resize', () => { - this.onUpdateSwiper() - }) - - }, - methods: { renderBreadcrumbItem() { @@ -114,10 +90,6 @@ export default { this.expandedKeys = this.list.map(p => p.key) } this.data = data - - this.$nextTick(() => { - this.onUpdateSwiper() - }) }).finally(() => { this.loading = false }) @@ -130,7 +102,6 @@ export default { onExpand(expandedKeys) { this.expandedKeys = expandedKeys this.autoExpandParent = false - this.onUpdateSwiper() }, onUnexpandAll() { @@ -150,11 +121,6 @@ export default { this.searchValue = value this.expandedKeys = expandedKeys this.autoExpandParent = true - - this.$nextTick(() => { - this.onUpdateSwiper() - }) - }, onSelect(selectedKeys) { @@ -167,14 +133,6 @@ export default { this.$emit('select', selectedIds) }, - onUpdateSwiper() { - clearTimeout(timer) - timer = setTimeout(() => { - swiper.update() - swiper.update() - }, 300) - }, - generateKey(data, level) { const n = level || [0] n.push(0) @@ -267,26 +225,21 @@ export default { -
-
-
- - - { - !this.loading && !this.list.length ? - - - - : - - } - -
-
-
+
+ + + { + !this.loading && !this.list.length ? + + + + : + + } +