在外部单击或使用关闭按钮时关闭对话框

Question

单击按钮后会出现调色板对话框。我试图通过关闭按钮或单击调色板对话框之外的任何位置来关闭调色板。因为目前没有选项可以关闭调色板，除非我们选择其中一种颜色。

即使没有选择颜色，我也希望调色板关闭：1) 通过关闭按钮或 2) 单击对话框外的任何位置时。

颜色选择器代码如下：

@foreach(var picker in _pickers)
{
     <button class="btn btn-primary me-2" @onclick="() => this.OnOpen(picker)">
        <div style="background-color:@picker.Color" class="buttonColor">&nbsp;</div>
        @picker.Title
    </button>

    <ColorPicker IsOpened="picker.IsOpen" MyColor="@picker.Color" Closed="(value) => this.OnClose(picker, value)"  />
}

@code{
    private List<ColorPickerData> _pickers = new();

    protected override Task OnInitializedAsync()
    {
        _pickers.Add(new() { Title="Picker 1" });
        _pickers.Add(new() { Title="Picker 2" });
        _pickers.Add(new() { Title = "Picker 3" });
        return Task.CompletedTask;
    }

    private Task OnClose(ColorPickerData data, string value)
    {
        data.IsOpen = false;
        data.Color = value;
        return Task.CompletedTask;
    }

    private Task OnOpen(ColorPickerData data)
    {
        data.IsOpen = true;
        return Task.CompletedTask;
    }

    public class ColorPickerData
    { 
        public string Title { get; set; } = "Color Picker";
        public bool IsOpen { get; set; }
        public string Color { get; set; } = "#000000";
    }
}

我尝试在现有代码中合并 @onfocusout="@(() => picker.IsOpen = false;)" 。但无法上班。您的意见将会有所帮助。谢谢。

Answer 1

您可以尝试以下代码，让它在点击空白区域时关闭：

    @foreach (var picker in _pickers)
    {
        <button class="btn btn-primary me-2" @onclick="() => this.OnOpen(picker)">
            <div style="background-color:@picker.Color" class="buttonColor">&nbsp;</div>
            @picker.Title
        </button>
    <mytag @onclick="()=>this.Close(picker)">
        <BlazorColorPicker.ColorPicker IsOpened="picker.IsOpen" MyColor="@picker.Color" Closed="(value) => this.OnClose(picker, value)" />
    </mytag>
    }
@code {

     ...


    private Task Close(ColorPickerData data)
    {
        data.IsOpen = false;
        return Task.CompletedTask;
    }
}

我用

BlazorColorPicker.ColorPicker

进行测试。实际上，它使组件在每次单击时关闭选择器。但不会对正常功能产生负面影响。