{"remainingRequest":"C:\\Users\\Admin\\Desktop\\education\\frontend\\node_modules\\vue-loader\\lib\\index.js??vue-loader-options!C:\\Users\\Admin\\Desktop\\education\\frontend\\src\\layout\\components\\TagsView\\ScrollPane.vue?vue&type=style&index=0&id=be6b7bae&lang=scss&scoped=true","dependencies":[{"path":"C:\\Users\\Admin\\Desktop\\education\\frontend\\src\\layout\\components\\TagsView\\ScrollPane.vue","mtime":1787567871547},{"path":"C:\\Users\\Admin\\Desktop\\education\\frontend\\node_modules\\css-loader\\dist\\cjs.js","mtime":1787309792478},{"path":"C:\\Users\\Admin\\Desktop\\education\\frontend\\node_modules\\vue-loader\\lib\\loaders\\stylePostLoader.js","mtime":1787309794547},{"path":"C:\\Users\\Admin\\Desktop\\education\\frontend\\node_modules\\postcss-loader\\src\\index.js","mtime":1787309793084},{"path":"C:\\Users\\Admin\\Desktop\\education\\frontend\\node_modules\\sass-loader\\dist\\cjs.js","mtime":1787309791955},{"path":"C:\\Users\\Admin\\Desktop\\education\\frontend\\node_modules\\cache-loader\\dist\\cjs.js","mtime":1787309791955},{"path":"C:\\Users\\Admin\\Desktop\\education\\frontend\\node_modules\\vue-loader\\lib\\index.js","mtime":1787309793790}],"contextDependencies":[],"result":[{"type":"Buffer","data":"base64:CgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoNCi5zY3JvbGwtY29udGFpbmVyIHsNCiAgd2hpdGUtc3BhY2U6IG5vd3JhcDsNCiAgcG9zaXRpb246IHJlbGF0aXZlOw0KICBvdmVyZmxvdzogaGlkZGVuOw0KICB3aWR0aDogMTAwJTsNCiAgOjp2LWRlZXAgew0KICAgIC5lbC1zY3JvbGxiYXJfX2JhciB7DQogICAgICBib3R0b206IDBweDsNCiAgICB9DQogICAgLmVsLXNjcm9sbGJhcl9fd3JhcCB7DQogICAgICBoZWlnaHQ6IDM0cHg7DQogICAgICBkaXNwbGF5OiBmbGV4Ow0KICAgICAgYWxpZ24taXRlbXM6IGNlbnRlcjsNCiAgICB9DQogIH0NCn0NCg=="},{"version":3,"sources":["ScrollPane.vue"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAoIA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA","file":"ScrollPane.vue","sourceRoot":"src/layout/components/TagsView","sourcesContent":["<template>\r\n  <el-scrollbar ref=\"scrollContainer\" :vertical=\"false\" class=\"scroll-container\" @wheel.native.prevent=\"handleScroll\">\r\n    <slot />\r\n  </el-scrollbar>\r\n</template>\r\n\r\n<script>\r\nconst tagAndTagSpacing = 4\r\n\r\nexport default {\r\n  name: 'ScrollPane',\r\n  data() {\r\n    return {\r\n      left: 0\r\n    }\r\n  },\r\n  computed: {\r\n    scrollWrapper() {\r\n      return this.$refs.scrollContainer.$refs.wrap\r\n    }\r\n  },\r\n  mounted() {\r\n    this.scrollWrapper.addEventListener('scroll', this.emitScroll, true)\r\n  },\r\n  beforeDestroy() {\r\n    this.scrollWrapper.removeEventListener('scroll', this.emitScroll)\r\n  },\r\n  methods: {\r\n    smoothScrollTo(target) {\r\n      const $scrollWrapper = this.scrollWrapper\r\n      const start = $scrollWrapper.scrollLeft\r\n      const distance = target - start\r\n      const duration = 300\r\n      let startTime = null\r\n\r\n      function ease(t, b, c, d) {\r\n        t /= d / 2\r\n        if (t < 1) return c / 2 * t * t + b\r\n        t--\r\n        return -c / 2 * (t * (t - 2) - 1) + b\r\n      }\r\n\r\n      const emit = this.$emit.bind(this)\r\n      function step(timestamp) {\r\n        if (!startTime) startTime = timestamp\r\n        const elapsed = timestamp - startTime\r\n        $scrollWrapper.scrollLeft = ease(elapsed, start, distance, duration)\r\n        if (elapsed < duration) {\r\n          requestAnimationFrame(step)\r\n        } else {\r\n          $scrollWrapper.scrollLeft = target\r\n          emit('updateArrows')\r\n        }\r\n      }\r\n\r\n      requestAnimationFrame(step)\r\n    },\r\n    handleScroll(e) {\r\n      const eventDelta = e.wheelDelta || -e.deltaY * 40\r\n      const $scrollWrapper = this.scrollWrapper\r\n      $scrollWrapper.scrollLeft = $scrollWrapper.scrollLeft + eventDelta / 4\r\n      this.$emit('updateArrows')\r\n    },\r\n    emitScroll() {\r\n      this.$emit('scroll')\r\n      this.$emit('updateArrows')\r\n    },\r\n    moveToTarget(currentTag) {\r\n      const $container = this.$refs.scrollContainer.$el\r\n      const $containerWidth = $container.offsetWidth\r\n      const $scrollWrapper = this.scrollWrapper\r\n      const tagList = this.$parent.$refs.tag\r\n\r\n      let firstTag = null\r\n      let lastTag = null\r\n\r\n      if (tagList.length > 0) {\r\n        firstTag = tagList[0]\r\n        lastTag = tagList[tagList.length - 1]\r\n      }\r\n\r\n      if (firstTag === currentTag) {\r\n        this.smoothScrollTo(0)\r\n      } else if (lastTag === currentTag) {\r\n        this.smoothScrollTo($scrollWrapper.scrollWidth - $containerWidth)\r\n      } else {\r\n        const currentIndex = tagList.findIndex(item => item === currentTag)\r\n        const prevTag = tagList[currentIndex - 1]\r\n        const nextTag = tagList[currentIndex + 1]\r\n        const afterNextTagOffsetLeft = nextTag.$el.offsetLeft + nextTag.$el.offsetWidth + tagAndTagSpacing\r\n        const beforePrevTagOffsetLeft = prevTag.$el.offsetLeft - tagAndTagSpacing\r\n\r\n        if (afterNextTagOffsetLeft > $scrollWrapper.scrollLeft + $containerWidth) {\r\n          this.smoothScrollTo(afterNextTagOffsetLeft - $containerWidth)\r\n        } else if (beforePrevTagOffsetLeft < $scrollWrapper.scrollLeft) {\r\n          this.smoothScrollTo(beforePrevTagOffsetLeft)\r\n        }\r\n      }\r\n    },\r\n    // 向左滚动固定距离\r\n    scrollLeft() {\r\n      const $scrollWrapper = this.scrollWrapper\r\n      this.smoothScrollTo(Math.max(0, $scrollWrapper.scrollLeft - 200))\r\n    },\r\n    // 向右滚动固定距离\r\n    scrollRight() {\r\n      const $scrollWrapper = this.scrollWrapper\r\n      const maxScroll = $scrollWrapper.scrollWidth - $scrollWrapper.clientWidth\r\n      this.smoothScrollTo(Math.min(maxScroll, $scrollWrapper.scrollLeft + 200))\r\n    },\r\n    // 直接平滑滚动到最左端\r\n    scrollToStart() {\r\n      this.smoothScrollTo(0)\r\n    },\r\n    // 直接平滑滚动到最右端\r\n    scrollToEnd() {\r\n      const $scrollWrapper = this.scrollWrapper\r\n      this.smoothScrollTo($scrollWrapper.scrollWidth - $scrollWrapper.clientWidth)\r\n    },\r\n    // 获取是否可以继续向左/右滚动\r\n    getScrollState() {\r\n      const $scrollWrapper = this.scrollWrapper\r\n      return {\r\n        canLeft: $scrollWrapper.scrollLeft > 0,\r\n        canRight: $scrollWrapper.scrollLeft < $scrollWrapper.scrollWidth - $scrollWrapper.clientWidth - 1\r\n      }\r\n    }\r\n  }\r\n}\r\n</script>\r\n\r\n<style lang=\"scss\" scoped>\r\n.scroll-container {\r\n  white-space: nowrap;\r\n  position: relative;\r\n  overflow: hidden;\r\n  width: 100%;\r\n  ::v-deep {\r\n    .el-scrollbar__bar {\r\n      bottom: 0px;\r\n    }\r\n    .el-scrollbar__wrap {\r\n      height: 34px;\r\n      display: flex;\r\n      align-items: center;\r\n    }\r\n  }\r\n}\r\n</style>\r\n"]}]}