feat(tag-input): support scroll in scroll type

Tencent · Oct 12, 2023 · 6ee0153 · 6ee0153
1 parent bdc4c93
commit 6ee0153
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 4 deletions.
diff --git a/src/_common b/src/_common
diff --git 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<HTMLElement>();
   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
@@ -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,
         }}
       />
     );