update 更换树滚动条

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%);
+    }
+  }
 }

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 {
               <a-icon type="switcher" onClick={this.onUnexpandAll} />
             </a-tooltip>
           </div>
-          <div class="swiper-container" ref="swiper">
-            <div class="swiper-wrapper">
-              <div class="swiper-slide">
-                <a-spin style={{ height: '100%' }} spinning={this.loading}>
-                  <a-icon slot="indicator" type="loading" spin />
-                  {
-                    !this.loading && !this.list.length ?
-                      <a-empty description={false} class="ant-list-empty-text">
-                        <template slot="image">
-                          <a-icon class="h3 mt-xl mb-md" type="smile" />
-                          <p>暂无数据</p>
-                        </template>
-                      </a-empty>
-                      :
-                      <a-tree {...{ props, on, scopedSlots }} />
-                  }
-                </a-spin>
-              </div>
-            </div>
-            <div class="swiper-scrollbar" />
+          <div class="yo-tree-layout--content">
+            <a-spin style={{ height: '100%' }} spinning={this.loading}>
+              <a-icon slot="indicator" type="loading" spin />
+              {
+                !this.loading && !this.list.length ?
+                  <a-empty description={false} class="ant-list-empty-text">
+                    <template slot="image">
+                      <a-icon class="h3 mt-xl mb-md" type="smile" />
+                      <p>暂无数据</p>
+                    </template>
+                  </a-empty>
+                  :
+                  <a-tree {...{ props, on, scopedSlots }} />
+              }
+            </a-spin>
           </div>
         </a-layout-sider>
         <a-layout-content>