diff --git a/src/_common b/src/_common index 5ad940507..419a67ef2 160000 --- a/src/_common +++ b/src/_common @@ -1 +1 @@ -Subproject commit 5ad940507e631b2d165e7be4517d58f9c8a1c0ab +Subproject commit 419a67ef29044d07c28f20c8713372d935bb7a69 diff --git a/src/tag-input/hooks/useTagScroll.ts b/src/tag-input/hooks/useTagScroll.ts index 6d6d7d72f..e89ebca8c 100644 --- a/src/tag-input/hooks/useTagScroll.ts +++ b/src/tag-input/hooks/useTagScroll.ts @@ -7,6 +7,7 @@ import { onMounted, onUnmounted, ref, toRefs, } from '@vue/composition-api'; import isFunction from 'lodash/isFunction'; + import { TdTagInputProps } from '../type'; export default function useTagScroll(props: TdTagInputProps) { @@ -16,6 +17,7 @@ export default function useTagScroll(props: TdTagInputProps) { const scrollDistance = ref(0); const scrollElement = ref(); const mouseEnterTimer = ref(); + const isScrollable = ref(false); // 设置可滚动 const updateScrollElement = (element: HTMLElement) => { const inputElement = element.children[0] as HTMLElement; @@ -34,6 +36,9 @@ export default function useTagScroll(props: TdTagInputProps) { const scrollToRight = () => { updateScrollDistance(); scrollTo(scrollDistance.value); + setTimeout(() => { + isScrollable.value = true; + }, 200); }; const scrollToLeft = () => { @@ -65,6 +70,7 @@ export default function useTagScroll(props: TdTagInputProps) { const scrollToLeftOnLeave = () => { if (excessTagsDisplayType.value !== 'scroll') return; + isScrollable.value = false; // 离开焦点不可滚动 scrollTo(0); clearTimeout(mouseEnterTimer.value); }; @@ -95,5 +101,6 @@ export default function useTagScroll(props: TdTagInputProps) { onWheel, scrollToRightOnEnter, scrollToLeftOnLeave, + isScrollable, }; } diff --git a/src/tag-input/tag-input.tsx b/src/tag-input/tag-input.tsx index f6833338f..d2a7a0d37 100644 --- a/src/tag-input/tag-input.tsx +++ b/src/tag-input/tag-input.tsx @@ -1,5 +1,5 @@ import { - defineComponent, computed, toRefs, ref, nextTick, + defineComponent, computed, toRefs, ref, nextTick, watch, } from '@vue/composition-api'; import { CloseCircleFilledIcon as TdCloseCircleFilledIcon } from 'tdesign-icons-vue'; @@ -62,7 +62,7 @@ export default defineComponent({ ); const { - scrollToRight, onWheel, scrollToRightOnEnter, scrollToLeftOnLeave, tagInputRef, + scrollToRight, onWheel, scrollToRightOnEnter, scrollToLeftOnLeave, tagInputRef, isScrollable, } = useTagScroll(props); // handle tag add and remove const { @@ -126,6 +126,17 @@ export default defineComponent({ context.emit('clear', ctx); }; + // 支持在超长滚动场景下滚动选项进行操作 + watch( + () => isScrollable.value, + (v) => { + const scrollElementClass = `${classPrefix.value}-input__prefix`; + const scrollElement = tagInputRef.value.$el.querySelector(`.${scrollElementClass}`); + if (v) scrollElement.classList.add(`${scrollElementClass}--scrollable`); + else scrollElement.classList.remove(`${scrollElementClass}--scrollable`); + }, + ); + return { tagValue, tInputValue, @@ -228,7 +239,7 @@ export default defineComponent({ click: this.onInnerClick, compositionstart: this.onInputCompositionstart, compositionend: this.onInputCompositionend, - mousewheel: this.onWheel, + // scroll: this.onWheel, }} /> );