From 74d8e939063d030133a3dd059b5c3662157c2627 Mon Sep 17 00:00:00 2001 From: seepine Date: Fri, 28 Jul 2023 11:25:05 +0800 Subject: [PATCH] feat(auto-complete): add virtual list support --- .../components/auto-complete/README.en-US.md | 14 ++++++ .../components/auto-complete/README.zh-CN.md | 13 +++++ .../auto-complete/__demo__/virtual-list.md | 48 +++++++++++++++++++ .../auto-complete/auto-complete.tsx | 41 +++++++++++++--- 4 files changed, 110 insertions(+), 6 deletions(-) create mode 100644 packages/web-vue/components/auto-complete/__demo__/virtual-list.md diff --git a/packages/web-vue/components/auto-complete/README.en-US.md b/packages/web-vue/components/auto-complete/README.en-US.md index 243dc96c0..fbc36365d 100644 --- a/packages/web-vue/components/auto-complete/README.en-US.md +++ b/packages/web-vue/components/auto-complete/README.en-US.md @@ -14,6 +14,8 @@ description: The auto-complete function of the input. @import ./__demo__/footer.md +@import ./__demo__/virtual-list.md + ## API @@ -30,6 +32,7 @@ description: The auto-complete function of the input. |filter-option|Custom option filtering method|`FilterOption`|`true`|| |trigger-props|trigger props|`TriggerProps`|`-`|2.14.0| |allow-clear|Whether to allow the input to be cleared|`boolean`|`false`|2.23.0| +|virtual-list-props|Pass the virtual list attribute, pass in this parameter to turn on virtual scrolling [VirtualListProps](#VirtualListProps)|`VirtualListProps`|`-`|2.50.0| ### `` Events |Event Name|Description|Parameters|version| @@ -52,3 +55,14 @@ description: The auto-complete function of the input. |footer|The footer of the popup menu box|-|| +### VirtualListProps + +|Name|Description|Type|Default|version| +|---|---|---|:---:|:---| +|height|Viewable area height|`number \| string`|`-`|| +|threshold|The threshold of the number of elements to enable virtual scrolling. When the number of data is less than the threshold, virtual scrolling will not be enabled.|`number`|`-`|| +|isStaticItemHeight|(Repealed) Is the element height fixed. Version 2.18.0 deprecated, please use `fixedSize`|`boolean`|`false`|| +|fixedSize|Is the element height fixed.|`boolean`|`false`|2.34.1| +|estimatedSize|Is the element height fixed.|`number`|`-`|2.34.1| +|buffer|The number of elements mounted in advance outside the boundary of the viewport.|`number`|`10`|2.34.1| + diff --git a/packages/web-vue/components/auto-complete/README.zh-CN.md b/packages/web-vue/components/auto-complete/README.zh-CN.md index 37b4c6010..9ae54d687 100644 --- a/packages/web-vue/components/auto-complete/README.zh-CN.md +++ b/packages/web-vue/components/auto-complete/README.zh-CN.md @@ -12,6 +12,8 @@ description: 输入框的自动补全功能。 @import ./__demo__/footer.md +@import ./__demo__/virtual-list.md + ## API @@ -28,6 +30,7 @@ description: 输入框的自动补全功能。 |filter-option|自定义选项过滤方法|`FilterOption`|`true`|| |trigger-props|trigger 组件属性|`TriggerProps`|`-`|2.14.0| |allow-clear|是否允许清空输入框|`boolean`|`false`|2.23.0| +|virtual-list-props|传递虚拟列表属性，传入此参数以开启虚拟滚动 [VirtualListProps](#VirtualListProps)|`VirtualListProps`|`-`|2.50.0| ### `` Events |事件名|描述|参数|版本| @@ -50,3 +53,13 @@ description: 输入框的自动补全功能。 |footer|弹出框的页脚|-|| +### VirtualListProps + +|参数名|描述|类型|默认值|版本| +|---|---|---|:---:|:---| +|height|可视区域高度|`number \| string`|`-`|| +|threshold|开启虚拟滚动的元素数量阈值，当数据数量小于阈值时不会开启虚拟滚动。|`number`|`-`|| +|isStaticItemHeight|（已废除）元素高度是否是固定的。2.34.1 版本废除，请使用 `fixedSize`|`boolean`|`false`|| +|fixedSize|元素高度是否是固定的。|`boolean`|`false`|2.34.1| +|estimatedSize|元素高度不固定时的预估高度。|`number`|`-`|2.34.1| +|buffer|视口边界外提前挂载的元素数量。|`number`|`10`|2.34.1| diff --git a/packages/web-vue/components/auto-complete/__demo__/virtual-list.md b/packages/web-vue/components/auto-complete/__demo__/virtual-list.md new file mode 100644 index 000000000..62f5f8524 --- /dev/null +++ b/packages/web-vue/components/auto-complete/__demo__/virtual-list.md @@ -0,0 +1,48 @@ +```yaml +title: + zh-CN: 虚拟列表 + en-US: Virtual List +``` + +## zh-CN + +虚拟列表的使用方法。 + +--- + +## en-US + +How to use the virtual list. + +--- + +```vue + + + +``` diff --git a/packages/web-vue/components/auto-complete/auto-complete.tsx b/packages/web-vue/components/auto-complete/auto-complete.tsx index df5ce71b8..716ac6f74 100644 --- a/packages/web-vue/components/auto-complete/auto-complete.tsx +++ b/packages/web-vue/components/auto-complete/auto-complete.tsx @@ -23,6 +23,8 @@ import Option from '../select/option.vue'; import { useSelect } from '../select/hooks/use-select'; import { getKeyFromValue } from '../select/utils'; import { useFormItem } from '../_hooks/use-form-item'; +import VirtualList from '../_components/virtual-list-v2'; +import { VirtualListProps } from '../_components/virtual-list-v2/interface'; export default defineComponent({ name: 'AutoComplete', @@ -105,6 +107,15 @@ export default defineComponent({ type: Boolean, default: false, }, + /** + * @zh 传递虚拟列表属性，传入此参数以开启虚拟滚动 [VirtualListProps](#VirtualListProps) + * @en Pass the virtual list attribute, pass in this parameter to turn on virtual scrolling [VirtualListProps](#VirtualListProps) + * @type VirtualListProps + * @version 2.50.0 + */ + virtualListProps: { + type: Object as PropType, + }, }, emits: { 'update:modelValue': (value: string) => true, @@ -175,6 +186,10 @@ export default defineComponent({ () => _popupVisible.value && validOptionInfos.value.length > 0 ); + // VirtualList + const virtualListRef = ref(); + const component = computed(() => (props.virtualListProps ? 'div' : 'li')); + const handlePopupVisibleChange = (popupVisible: boolean) => { _popupVisible.value = popupVisible; }; @@ -232,6 +247,7 @@ export default defineComponent({ filterOption: mergedFilterOption, popupVisible: computedPopupVisible, valueKeys: computedValueKeys, + component, dropdownRef, optionRefs, onSelect: handleSelect, @@ -273,13 +289,26 @@ export default defineComponent({ ref={dropdownRef} class={`${prefixCls}-dropdown`} v-slots={{ - footer: slots.footer, + 'default': () => [ + ...validOptions.value.map((info) => + renderOption(info as SelectOptionInfo) + ), + ], + 'virtual-list': () => ( + + renderOption(item), + }} + /> + ), + 'footer': slots.footer, }} - > - {validOptions.value.map((info) => - renderOption(info as SelectOptionInfo) - )} - + virtualList={Boolean(props.virtualListProps)} + /> ); };