项目

Blazor UI:区块/忙碌服务

UI区块功能可以禁用(锁定)整个页面或页面的某个部分。

快速示例

只需在页面或组件中 注入 IBlockUiService服务,然后调用 Block/UnBlock 方法即可禁用(锁定)元素。

namespace MyProject.Blazor.Pages
{
    public partial class Index
    {
        private readonly IBlockUiService _blockUiService;

        public Index(IBlockUiService blockUiService)
        {
            _blockUiService = blockUiService;
        }

        public async Task BlockForm()
        {
            /*
              Block方法参数说明:
                selectors: 包含一个或多个选择器匹配条件的字符串。参考:https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector#selectors
                busy: 设置为true时会在被锁定区域显示进度指示器
            */
            await _blockUiService.Block(selectors: "#MySelectors", busy: true);
        }
    }
}

实现后的UI效果如下:

ui-busy

之后您可以使用 _blockUiService.UnBlock() 来重新启用忙碌区域/页面。

在本文档中