Blazor Webassembly多标签页实现非iframe的实现
时间:2021-12-21 作者:liningit
Blazor Webassembly多标签页实现非iframe的实现
前面用iframe实现了多标签页,这次是不用iframe实现的多标签页.参考了一下Ant Design Blazor.
基本功能已经都实现了不论是标签滚动、激活、左移、右移、关闭其他,还是在内容页跳转、新增、关闭标签都有实现。
已经可以用来做实际项目
源码地址: https://域名/liningit/BlazorWebassemblyMultiPagesTabNoIframe
实现原理是新建一个类继承RouteView,在此类里面的Render方法中可以通过RouteData获取当前路由对应的对象.然后生成RenderFragment.
然后将其保存到List中,然后循环显示出来.对于未激活的通过display:none隐藏就可以了,这样哪怕切换标签状态也是保存的并不会刷新
public class ReuseTabsRouteView : RouteView
{
[Inject]
public TabSetTool TabSetTool { get; set; }
[Inject]
public NavigationManager Navmgr { get; set; }
protected override void Render(RenderTreeBuilder builder)
{
var layoutType = 域名ustomAttribute<LayoutAttribute>()?.LayoutType ?? DefaultLayout;
var body = CreateBody(RouteData, 域名);
域名Component<CascadingValue<ReuseTabsRouteView>>(0);
域名ttribute(1, "Name", "RouteView");
域名ttribute(2, "Value", this);
域名ttribute(3, "ChildContent", (RenderFragment)(b =>
{
域名Component(20, layoutType);
域名ttribute(21, "Body", body);
域名eComponent();
}));
域名eComponent();
var url = "/" + 域名seRelativePath(域名);
if (url != "/#")
{
var selTab = 域名tOrDefault(m => 域名 == url && (域名e == 域名e || 域名llOrEmpty(域名e)));
if (selTab == null)
{
域名(new Tab
{
Body = body,
Url = url,
Title = 域名e,
IsActive = true,
});
}
else
{
域名e = 域名e;
域名 = body;
域名tive = true;
}
}
}
private RenderFragment CreateBody(RouteData routeData, string url)
{
return builder =>
{
域名Component(0, 域名Type);
foreach (var routeValue in 域名eValues)
{
域名ttribute(1, 域名, 域名e);
}
域名eComponent();
};
}
}
域名r中将RouteView改成ReuseTabsRouteView.
另外要注意TabSet中一定要有
[CascadingParameter(Name = "RouteView")]
public ReuseTabsRouteView RouteView { get; set; }
这两句,要不然页面会不更新