!1625 feat(#I423P6): add OnValueChanged callback on ValidateBase component

* doc: 更新 Cascader 参数文档
* feat: ValidateBase 增加 OnValueChanged 回调方法
* feat: Dropdown 支持集成
This commit is contained in:
Argo 2021-07-23 04:24:20 +00:00
parent 790ce871af
commit aa3455c6e2
6 changed files with 24 additions and 20 deletions

View File

@ -4,28 +4,28 @@
<Block Title="Cascader 级联选择" Introduction="提供各种颜色的下拉选择框">
<div class="row g-3">
<div class="col-12 col-sm-6">
<Cascader TValue="string" Items="@Items" OnValueChanged="@OnItemChanged"></Cascader>
<Cascader TValue="string" Items="@Items" OnSelectedItemChanged="@OnItemChanged"></Cascader>
</div>
<div class="col-12 col-sm-6">
<Cascader TValue="string" Color="Color.Primary" Items="@Items" OnValueChanged="@OnItemChanged"></Cascader>
<Cascader TValue="string" Color="Color.Primary" Items="@Items" OnSelectedItemChanged="@OnItemChanged"></Cascader>
</div>
<div class="col-12 col-sm-6">
<Cascader TValue="string" Color="Color.Success" Items="@Items" OnValueChanged="@OnItemChanged"></Cascader>
<Cascader TValue="string" Color="Color.Success" Items="@Items" OnSelectedItemChanged="@OnItemChanged"></Cascader>
</div>
<div class="col-12 col-sm-6">
<Cascader TValue="string" Color="Color.Danger" Items="@Items" OnValueChanged="@OnItemChanged"></Cascader>
<Cascader TValue="string" Color="Color.Danger" Items="@Items" OnSelectedItemChanged="@OnItemChanged"></Cascader>
</div>
<div class="col-12 col-sm-6">
<Cascader TValue="string" Color="Color.Warning" Items="@Items" OnValueChanged="@OnItemChanged"></Cascader>
<Cascader TValue="string" Color="Color.Warning" Items="@Items" OnSelectedItemChanged="@OnItemChanged"></Cascader>
</div>
<div class="col-12 col-sm-6">
<Cascader TValue="string" Color="Color.Info" Items="@Items" OnValueChanged="@OnItemChanged"></Cascader>
<Cascader TValue="string" Color="Color.Info" Items="@Items" OnSelectedItemChanged="@OnItemChanged"></Cascader>
</div>
<div class="col-12 col-sm-6">
<Cascader TValue="string" Color="Color.Secondary" Items="@Items" OnValueChanged="@OnItemChanged"></Cascader>
<Cascader TValue="string" Color="Color.Secondary" Items="@Items" OnSelectedItemChanged="@OnItemChanged"></Cascader>
</div>
<div class="col-12 col-sm-6">
<Cascader TValue="string" Color="Color.Dark" Items="@Items" OnValueChanged="@OnItemChanged"></Cascader>
<Cascader TValue="string" Color="Color.Dark" Items="@Items" OnSelectedItemChanged="@OnItemChanged"></Cascader>
</div>
</div>
<Logger @ref="Trace" class="mt-3" />

View File

@ -84,7 +84,7 @@ namespace BootstrapBlazor.Shared.Pages
{
new EventItem()
{
Name = "OnValueChanged",
Name = nameof(Cascader<string>.OnSelectedItemChanged),
Description="级联选择选项改变时触发此事件",
Type ="Func<CascaderItem[], Task>"
}
@ -148,4 +148,4 @@ namespace BootstrapBlazor.Shared.Pages
}
};
}
}
}

View File

@ -56,7 +56,7 @@ namespace BootstrapBlazor.Components
/// ValueChanged 方法
/// </summary>
[Parameter]
public Func<CascaderItem[], Task>? OnValueChanged { get; set; }
public Func<CascaderItem[], Task>? OnSelectedItemChanged { get; set; }
[Inject]
[NotNull]
@ -190,7 +190,7 @@ namespace BootstrapBlazor.Components
CurrentValueAsString = value;
if (OnValueChanged != null) await OnValueChanged.Invoke(_selectedItems.ToArray());
if (OnSelectedItemChanged != null) await OnSelectedItemChanged.Invoke(_selectedItems.ToArray());
}
private void RefreshDisplayValue() => _displayText = string.Join("/", _selectedItems.Select(item => item.Text));

View File

@ -60,7 +60,7 @@ namespace BootstrapBlazor.Components
/// </summary>
/// <param name="item"></param>
/// <returns></returns>
private string? ActiveItem(SelectedItem item) => CssBuilder.Default("dropdown-item")
protected string? ActiveItem(SelectedItem item) => CssBuilder.Default("dropdown-item")
.AddClass("active", () => item.Value == CurrentValueAsString)
.Build();
@ -81,7 +81,7 @@ namespace BootstrapBlazor.Components
/// <summary>
/// 下拉框选项点击时调用此方法
/// </summary>
private async Task OnItemClick(SelectedItem item)
protected async Task OnItemClick(SelectedItem item)
{
if (!item.IsDisabled)
{

View File

@ -62,12 +62,6 @@ namespace BootstrapBlazor.Components
[Parameter]
public Color Color { get; set; } = Color.Success;
/// <summary>
///
/// </summary>
[Parameter]
public Func<bool, Task>? OnValueChanged { get; set; }
/// <summary>
/// 点击控件时触发此方法
/// </summary>

View File

@ -82,6 +82,10 @@ namespace BootstrapBlazor.Components
{
_ = ValueChanged.InvokeAsync(value);
}
if (OnValueChanged != null)
{
_ = OnValueChanged.Invoke(value);
}
if (!SkipValidate && FieldIdentifier != null)
{
EditContext?.NotifyFieldChanged(FieldIdentifier.Value);
@ -145,6 +149,12 @@ namespace BootstrapBlazor.Components
}
}
/// <summary>
/// 获得/设置 Value 改变时回调方法
/// </summary>
[Parameter]
public Func<TValue, Task>? OnValueChanged { get; set; }
/// <summary>
/// 获得/设置 类型转化失败格式化字符串 默认为 null
/// </summary>