xdesign-vue-next/es/tag-input/hooks/useTagScroll.mjs.map

XDesign Component for vue-next

{"version":3,"file":"useTagScroll.mjs","sources":["../../../src/tag-input/hooks/useTagScroll.ts"],"sourcesContent":["/**\n * 当标签数量过多时，输入框显示不下，则需要滚动查看，以下为滚动逻辑\n * 如果标签过多时的处理方式，是标签省略，则不需要此功能\n */\n\nimport isFunction from 'lodash/isFunction';\nimport { onMounted, onUnmounted, ref, toRefs } from 'vue';\nimport { TdTagInputProps } from '../type';\n\nexport default function useTagScroll(props: TdTagInputProps) {\n  const tagInputRef = ref();\n  const { excessTagsDisplayType, readonly, disabled } = toRefs(props);\n  // 允许向右滚动的最大距离\n  const scrollDistance = ref(0);\n  const scrollElement = ref<HTMLElement>();\n  const mouseEnterTimer = ref();\n\n  const updateScrollElement = (element: HTMLElement) => {\n    const inputElement = element.children[0] as HTMLElement;\n    scrollElement.value = inputElement;\n  };\n\n  const updateScrollDistance = () => {\n    scrollDistance.value = scrollElement.value.scrollWidth - scrollElement.value.clientWidth;\n  };\n\n  const scrollTo = (distance: number) => {\n    if (!isFunction(scrollElement.value?.scroll)) return;\n    scrollElement.value.scroll({ left: distance, behavior: 'smooth' });\n  };\n\n  const scrollToRight = () => {\n    updateScrollDistance();\n    scrollTo(scrollDistance.value);\n  };\n\n  const scrollToLeft = () => {\n    scrollTo(0);\n  };\n\n  // TODO：MAC 电脑横向滚动，Windows 纵向滚动。当前只处理了横向滚动\n  const onWheel = ({ e }: { e: WheelEvent }) => {\n    if (readonly.value || disabled.value) return;\n    if (!scrollElement.value) return;\n    if (e.deltaX > 0) {\n      const distance = Math.min(scrollElement.value.scrollLeft + 120, scrollDistance.value);\n      scrollTo(distance);\n    } else {\n      const distance = Math.max(scrollElement.value.scrollLeft - 120, 0);\n      scrollTo(distance);\n    }\n  };\n\n  // 鼠标 hover，自动滑动到最右侧，以便输入新标签\n  const scrollToRightOnEnter = () => {\n    if (excessTagsDisplayType.value !== 'scroll') return;\n    // 一闪而过的 mousenter 不需要执行\n    mouseEnterTimer.value = setTimeout(() => {\n      scrollToRight();\n      clearTimeout(mouseEnterTimer.value);\n    }, 100);\n  };\n\n  const scrollToLeftOnLeave = () => {\n    if (excessTagsDisplayType.value !== 'scroll') return;\n    scrollTo(0);\n    clearTimeout(mouseEnterTimer.value);\n  };\n\n  const init = () => {\n    const element = tagInputRef.value?.$el;\n    if (!element) return;\n    updateScrollElement(element);\n  };\n\n  const clear = () => {\n    clearTimeout(mouseEnterTimer.value);\n  };\n\n  onMounted(init);\n\n  onUnmounted(clear);\n\n  return {\n    tagInputRef,\n    scrollElement,\n    scrollDistance,\n    scrollTo,\n    scrollToRight,\n    scrollToLeft,\n    updateScrollElement,\n    updateScrollDistance,\n    onWheel,\n    scrollToRightOnEnter,\n    scrollToLeftOnLeave,\n  };\n}\n"],"names":["scrollDistance","isFunction","scrollElement","left","behavior","updateScrollDistance","scrollTo","mouseEnterTimer","scrollToRight","clearTimeout","tagInputRef","scrollToLeft","updateScrollElement","onWheel","scrollToRightOnEnter","scrollToLeftOnLeave"],"mappings":"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"}