test/ant-design-blazor
1
0
Fork 0
mirror of https://gitee.com/ant-design-blazor/ant-design-blazor.git synced 2024-12-04 13:08:23 +08:00
Code Issues Actions 6 Packages Projects Releases Wiki Activity

refactor(module: autocomplete): optimize performance (#686)

Browse Source
This commit is contained in:
TimChen 2020-10-16 13:08:43 +08:00 committed by GitHub
parent 698b509e2c
commit 30d99c380b
3 changed files with 101 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
components/auto-complete/AutoComplete.razor
View File

@ -17,31 +17,35 @@
OverlayStyle="@OverlayStyle"
OnVisibleChange="@OnOverlayTriggerVisibleChange">
<Overlay>
<CascadingValue Value="this">
<div style="max-height: 256px; overflow-y: auto; overflow-anchor: none; @_minWidth">
<div style="display: flex;flex-direction: column;">
@if (Options.Value != null)
{
foreach (var option in GetOptionItems())
@if (ShowPanel)
{
<div style="max-height: 256px; overflow-y: auto; overflow-anchor: none; @_minWidth">
<div style="display: flex;flex-direction: column;">
@if (Options.Value != null)
{
<AutoCompleteOption Value="@option.Value" Label="@option.Label" Disabled="option.IsDisabled">
@option.Label
</AutoCompleteOption>
foreach (var option in GetOptionItems())
{
<AutoCompleteOption Value="@option.Value" Label="@option.Label" Disabled="option.IsDisabled">
@option.Label
</AutoCompleteOption>
}
}
}
else
{
@AutoCompleteOptions
}
else
{
@AutoCompleteOptions
}
</div>
</div>
</div>
}
</CascadingValue>
</Overlay>
<ChildContent>
<CascadingValue Value="this">
@if (ChildContent == null)
{
<AutoCompleteInput @bind-Value="@CurrentValue" Placeholder="@Placeholder" Disabled="@Disabled"/>
<AutoCompleteInput @bind-Value="@CurrentValue" Placeholder="@Placeholder" Disabled="@Disabled" />
}
else
{

68
site/AntBlazor.Docs/Demos/Components/AutoComplete/demo/Performance.razor Normal file
View File

@ -0,0 +1,68 @@

@for (int i = 0; i < 100; i++)
{
var count = i;
<AutoComplete @bind-Value="@value" CompareWith="CompareWith" OnSelectionChange="OnSelectionChange" Placeholder="@($"第{count}个")">
<AutoCompleteOptions>
@foreach (var option in options)
{
<AutoCompleteOption Value="@option" Label="@option.label">
</AutoCompleteOption>
}
</AutoCompleteOptions>
</AutoComplete>
}
<Divider></Divider>
<span>bind-Value:@value</span>
<br />
<span>SelectedValue:@(System.Text.Json.JsonSerializer.Serialize(selectItem?.Value))</span>
@code
{
protected override void OnInitialized()
{
for (int i = 0; i < 20; i++)
{
options.Add(new ObjectValueOption() { label = $"Lucy{i}", value = $"lucy{i}", age = 20 });
options.Add(new ObjectValueOption() { label = $"Jack{i}", value = $"jack{i}", age = 22 });
}
base.OnInitialized();
}
private string value;
List<ObjectValueOption> options = new List<ObjectValueOption>();
Func<object, object, bool> CompareWith = (a, b) =>
{
if (a is ObjectValueOption o1 && b is ObjectValueOption o2)
{
return o1.value == o2.value;
}
else
{
return false;
}
};
private AutoCompleteOption selectItem;
void OnSelectionChange(AutoCompleteOption item)
{
selectItem = item;
}
public class ObjectValueOption
{
public string label { get; set; }
public string value { get; set; }
public int age { get; set; }
}
}

14
site/AntBlazor.Docs/Demos/Components/AutoComplete/demo/performance.md Normal file
View File

@ -0,0 +1,14 @@
---
order: 99
title:
zh-CN: 性能
en-US: performance
---
## zh-CN
演示控件的性能
## en-US
Demonstrate the performance of controls