feat(SelectTrigger): 折叠的 Tag 弹出框增加滚动条

WeBankFinTech · Apr 18, 2024 · 6254b1b · 6254b1b
1 parent 097f37b
commit 6254b1b
Showing 1 changed file with 31 additions and 27 deletions.
diff --git a/components/select-trigger/selectTrigger.vue b/components/select-trigger/selectTrigger.vue
@@ -92,32 +92,34 @@
                                 {{ tag.label }}
                             </Tag>
                             <template #content>
-                                <Tag
-                                    v-for="(
-                                        collapsedTag, collapsedTagIndex
-                                    ) in tag.collapsedOptions"
-                                    :key="collapsedTagIndex"
-                                    type="info"
-                                    size="small"
-                                    :class="[
-                                        `${prefixCls}-label-item`,
-                                        `${prefixCls}-label-collapsed-item`,
-                                    ]"
-                                    :closable="collapsedTag.closable"
-                                    :bordered="hasTagBordered"
-                                    @close="
-                                        handleRemove(
-                                            calcCollapseTagIndex(
-                                                collapsedTagIndex,
-                                            ),
-                                        )
-                                    "
-                                >
-                                    <Ellipsis
-                                        :class="`${prefixCls}-label-text`"
-                                        :content="collapsedTag.label"
-                                    />
-                                </Tag>
+                                <Scrollbar :maxHeight="500">
+                                    <Tag
+                                        v-for="(
+                                            collapsedTag, collapsedTagIndex
+                                        ) in tag.collapsedOptions"
+                                        :key="collapsedTagIndex"
+                                        type="info"
+                                        size="small"
+                                        :class="[
+                                            `${prefixCls}-label-item`,
+                                            `${prefixCls}-label-collapsed-item`,
+                                        ]"
+                                        :closable="collapsedTag.closable"
+                                        :bordered="hasTagBordered"
+                                        @close="
+                                            handleRemove(
+                                                calcCollapseTagIndex(
+                                                    collapsedTagIndex,
+                                                ),
+                                            )
+                                        "
+                                    >
+                                        <Ellipsis
+                                            :class="`${prefixCls}-label-text`"
+                                            :content="collapsedTag.label"
+                                        />
+                                    </Tag>
+                                </Scrollbar>
                             </template>
                         </Tooltip>
                     </template>
@@ -201,7 +203,8 @@ import getPrefixCls from '../_util/getPrefixCls';
 import { useTheme } from '../_theme/useTheme';
 import Ellipsis from '../ellipsis';
 import Tooltip from '../tooltip';
-import Tag from '../tag/tag.vue';
+import Tag from '../tag';
+import Scrollbar from '../scrollbar';
 import UpOutlined from '../icon/UpOutlined';
 import DownOutlined from '../icon/DownOutlined';
 import CloseCircleFilled from '../icon/CloseCircleFilled';
@@ -241,6 +244,7 @@ export default defineComponent({
     name: 'FSelect',
     components: {
         Tag,
+        Scrollbar,
         Ellipsis,
         Tooltip,
         UpOutlined,