add scrollpane left and right move arrow

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>