From 6ee01536655e4ef87aeb37ef08124cbffeb14a4c Mon Sep 17 00:00:00 2001 From: Uyarn Date: Thu, 12 Oct 2023 16:50:49 +0800 Subject: [PATCH 1/3] feat(tag-input): support scroll in scroll type --- src/_common | 2 +- src/tag-input/hooks/useTagScroll.ts | 7 +++++++ src/tag-input/tag-input.tsx | 17 ++++++++++++++--- 3 files changed, 22 insertions(+), 4 deletions(-) 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, }} /> ); From 5c5030b2194f53c996b097b0afa1e31faaa0f7d4 Mon Sep 17 00:00:00 2001 From: Uyarn Date: Thu, 12 Oct 2023 16:57:20 +0800 Subject: [PATCH 2/3] chore: update snapshot --- src/tag-input/_example/excess.vue | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/tag-input/_example/excess.vue b/src/tag-input/_example/excess.vue index 691a43762..81d232c52 100644 --- a/src/tag-input/_example/excess.vue +++ b/src/tag-input/_example/excess.vue @@ -11,7 +11,7 @@ export default { data() { return { - tags: ['Vue', 'React'], + tags: ['Vue', 'React', 'VueNext', 'MiniProgram', 'Angular', 'Starter Kit'], }; }, }; From f0531f3d560d52e02b321d20015f556a2acaed95 Mon Sep 17 00:00:00 2001 From: Uyarn Date: Thu, 12 Oct 2023 19:11:44 +0800 Subject: [PATCH 3/3] chore: update snapshot --- src/tag-input/tag-input.tsx | 3 +- test/snap/__snapshots__/csr.test.js.snap | 152 +++++++++++++++++++++++ test/snap/__snapshots__/ssr.test.js.snap | 2 +- 3 files changed, 155 insertions(+), 2 deletions(-) diff --git a/src/tag-input/tag-input.tsx b/src/tag-input/tag-input.tsx index d2a7a0d37..f3177b2aa 100644 --- a/src/tag-input/tag-input.tsx +++ b/src/tag-input/tag-input.tsx @@ -130,6 +130,7 @@ export default defineComponent({ watch( () => isScrollable.value, (v) => { + if (props.excessTagsDisplayType !== 'scroll') return; const scrollElementClass = `${classPrefix.value}-input__prefix`; const scrollElement = tagInputRef.value.$el.querySelector(`.${scrollElementClass}`); if (v) scrollElement.classList.add(`${scrollElementClass}--scrollable`); @@ -239,7 +240,7 @@ export default defineComponent({ click: this.onInnerClick, compositionstart: this.onInputCompositionstart, compositionend: this.onInputCompositionend, - // scroll: this.onWheel, + mousewheel: this.onWheel, }} /> ); diff --git a/test/snap/__snapshots__/csr.test.js.snap b/test/snap/__snapshots__/csr.test.js.snap index 839c89640..a4cb3f161 100644 --- a/test/snap/__snapshots__/csr.test.js.snap +++ b/test/snap/__snapshots__/csr.test.js.snap @@ -131955,6 +131955,82 @@ exports[`csr snapshot test > csr test ./src/tag-input/_example/excess.vue 1`] = /> +
+ + VueNext + + + + +
+
+ + MiniProgram + + + + +
+
+ + Angular + + + + +
+
+ + Starter Kit + + + + +
csr test ./src/tag-input/_example/excess.vue 1`] = /> +
+ + VueNext + + + + +
+
+ + MiniProgram + + + + +
+
+ + Angular + + + + +
+
+ + Starter Kit + + + + +
renders ./src/tag-input/_example/custom-tag.vue cor exports[`ssr snapshot test > renders ./src/tag-input/_example/draggable.vue correctly 1`] = `"
Vue
React
Angular
Controlled:
Vue
React
Angular
Miniprogram
"`; -exports[`ssr snapshot test > renders ./src/tag-input/_example/excess.vue correctly 1`] = `"
Scroll:
Vue
React
BreakLine:
Vue
React
"`; +exports[`ssr snapshot test > renders ./src/tag-input/_example/excess.vue correctly 1`] = `"
Scroll:
Vue
React
VueNext
MiniProgram
Angular
Starter Kit
BreakLine:
Vue
React
VueNext
MiniProgram
Angular
Starter Kit
"`; exports[`ssr snapshot test > renders ./src/tag-input/_example/max.vue correctly 1`] = `"
最多只能输入 3 个标签
"`;