From 70254758e1e5999d23618c8a904659884c4c7db6 Mon Sep 17 00:00:00 2001
From: zileyuan <zileyuan@qq.com>
Date: Thu, 20 Feb 2020 17:09:05 +0800
Subject: [PATCH] add scrollpane left and right move arrow

---
 src/layout/components/TagsView/ScrollPane.vue | 32 +++++++++++++++++--
 1 file changed, 29 insertions(+), 3 deletions(-)

diff --git a/src/layout/components/TagsView/ScrollPane.vue b/src/layout/components/TagsView/ScrollPane.vue
index 0ec76e72..b87b2b08 100644
--- a/src/layout/components/TagsView/ScrollPane.vue
+++ b/src/layout/components/TagsView/ScrollPane.vue
@@ -1,7 +1,19 @@
 <template>
-  <el-scrollbar ref="scrollContainer" :vertical="false" class="scroll-container" @wheel.native.prevent="handleScroll">
-    <slot />
-  </el-scrollbar>
+  <div class="scroll-box">
+    <el-button
+      class="scroll-arrow"
+      icon="el-icon-arrow-left"
+      @click="handleArrow(-80)"
+    />
+    <el-scrollbar ref="scrollContainer" :vertical="false" class="scroll-container" @wheel.native.prevent="handleScroll">
+      <slot />
+    </el-scrollbar>
+    <el-button
+      class="scroll-arrow"
+      icon="el-icon-arrow-right"
+      @click="handleArrow(80)"
+    />
+  </div>
 </template>
 
 <script>
@@ -25,6 +37,10 @@ export default {
       const $scrollWrapper = this.scrollWrapper
       $scrollWrapper.scrollLeft = $scrollWrapper.scrollLeft + eventDelta / 4
     },
+    handleArrow(v) {
+      const $scrollWrapper = this.scrollWrapper
+      $scrollWrapper.scrollLeft = $scrollWrapper.scrollLeft + v
+    },
     moveToTarget(currentTag) {
       const $container = this.$refs.scrollContainer.$el
       const $containerWidth = $container.offsetWidth
@@ -82,4 +98,14 @@ export default {
     }
   }
 }
+.scroll-box {
+  display: flex;
+}
+.scroll-arrow {
+  width: 28px;
+  height: 28px;
+  margin: 3px 3px;
+  padding: 1px 1px;
+  border-radius: 0;
+}
 </style>