CssBuilder包的Blazor属性飞溅问题

Question

我正在使用CsBuilder来构建CSS，如CsBuilder文档中所述。当我添加它时，它会打断我传递的点击处理程序。我要么得到点击处理程序，要么得到CSS，而不是两者都得到。

ComponentUIBase

using Microsoft.AspNetCore.Components;
using System;
using System.Collections.Generic;
namespace BlazorServer.UI
{
public class UIComponentBase : ComponentBase
{
[Parameter]
public RenderFragment ChildContent { get; set; }
[Parameter(CaptureUnmatchedValues = true)]
public IReadOnlyDictionary<string, object> AdditionalAttributes { get; set; } = new Dictionary<string, Object>();
}
}

自定义按钮剃刀组件-当@属性存在时，CSS会中断并onclick有效，当@属性被删除时，CSS有效且onclick会中断

@inherits UIComponentBase
<button class="@BaseCss" @attributes="AdditionalAttributes">
@ChildContent
</button>

后面的自定义按钮代码

using BlazorComponentUtilities;
using Microsoft.AspNetCore.Components;
namespace BlazorServer.UI.Buttons
{
public partial class Button
{
[Parameter]
public string Color { get; set; } = "btn-primary";
[Parameter]
public bool Rounded { get; set; } = false;
public string BaseCss =>
new CssBuilder("btn")
.AddClass(Color)
.AddClass("rounded-0", when: !Rounded)
.AddClass("rounded-2", when: Rounded)
.AddClass("shadow-none")
.AddClassFromAttributes(AdditionalAttributes)
.Build();
}
}

母组件

<Card Color="bg-info">
<CardHeader>Card Header</CardHeader>
<CardBody>
<CardTitle>Card title</CardTitle>
<CardTitle SubTitle>Card Subtitle</CardTitle>
<CardText>Card text goes here...</CardText>
</CardBody>
<CardFooter>
<Spacer />
<Button Color="bg-danger">Cancel</Button>
<Button class="ms-2" Color="bg-primary" @onclick="Test">Ok</Button>
</CardFooter>
</Card>
@code {
private async void Test()
{
await JsRuntime.InvokeVoidAsync("alert", "Warning!11"); // Alert
}
}

Answer 1

您需要从splatter属性中删除class。

我有一个类似的设置你。这是一些代码。

我的UIComponentBase:

public abstract class UIComponentBase : ComponentBase
{
[Parameter] public RenderFragment? ChildContent { get; set; }
[Parameter(CaptureUnmatchedValues = true)] public IDictionary<string, object> UserAttributes { get; set; } = new Dictionary<string, object>();
protected virtual List<string> UnwantedAttributes { get; set; } = new List<string>();
protected Dictionary<string, object> SplatterAttributes
{
get
{
var list = new Dictionary<string, object>();
foreach (var item in UserAttributes)
{
if (!UnwantedAttributes.Any(item1 => item1.Equals(item.Key)))
list.Add(item.Key, item.Value);
}
return list;
}
}
}

我的基类-默认div:

public class UIComponent : UIComponentBase
{
[Parameter] public bool Show { get; set; } = true;
[Parameter] public bool Disabled { get; set; } = false;
[Parameter] public string? Tag { get; set; }
[Parameter] public EventCallback<MouseEventArgs> ClickEvent { get; set; }
protected virtual List<string> CssClasses { get; private set; } = new List<string>();
protected virtual string HtmlTag => this.Tag ?? "div";
protected override List<string> UnwantedAttributes { get; set; } = new List<string>() { "class" };
protected string CssClass
=> CSSBuilder.Class()
.AddClass(CssClasses)
.AddClassFromAttributes(this.UserAttributes)
.Build();
protected override void BuildRenderTree(RenderTreeBuilder builder)
{
if (this.Show)
{
builder.OpenElement(0, this.HtmlTag);
builder.AddMultipleAttributes(1, this.SplatterAttributes);
if (!string.IsNullOrWhiteSpace(this.CssClass))
builder.AddAttribute(2, "class", this.CssClass);
if (Disabled)
builder.AddAttribute(3, "disabled");
if (ClickEvent.HasDelegate)
builder.AddAttribute(4, "onclick", EventCallback.Factory.Create<MouseEventArgs>(this, ClickEvent));
builder.AddContent(5, ChildContent);
builder.CloseElement();
}
}
}

然后我的按钮：

public class UIButton : UIComponent
{
public UIButton()
=> this.CssClasses.Add("btn mr-1");
protected override string HtmlTag => "button";
protected override void BuildRenderTree(RenderTreeBuilder builder)
{
if (this.Show)
{
builder.OpenElement(0, this.HtmlTag);
builder.AddAttribute(1, "class", this.CssClass);
builder.AddMultipleAttributes(2, this.SplatterAttributes);
if (!UserAttributes.ContainsKey("type"))
builder.AddAttribute(3, "type", "button");
if (Disabled)
builder.AddAttribute(4, "disabled");
if (ClickEvent.HasDelegate)
builder.AddAttribute(5, "onclick", EventCallback.Factory.Create<MouseEventArgs>(this, ClickEvent));
builder.AddContent(6, ChildContent);
builder.CloseElement();
}
}
}

Answer 2

所以我不知道属性飞溅是从右到左发生的。。以下代码修复了问题：(

<button @attributes="AdditionalAttributes" class="@BaseCss">
@ChildContent
</button>