在Blazor中监听窗口改变事件Resize

2021-10-18 乐帮网

blazor web assembly

Blazor中监听元素的Resize事件，很遗憾的告诉你，这并做不到，但是在Blazor中却可以监听body的Resize事件。我们可以认为body的resize事件会触发元素的resize事件。下面一段代码展示了如果在你的程序中监听body的resize事情。
首先我们需要一个JS文件，它负责注册一个全局事件如下：

//https://lebang2020.cn/details/211018zyatk2ae.html
window.AddResize = function (methodName, dot) {
            window.onresize = function () {
                try {
                    dot.invokeMethodAsync(methodName);
                } catch { }
            };
        };

接下来我们在后台调用这个方法即可

 protected override async Task OnInitializedAsync()
 {
	await _jsRuntime.InvokeVoidAsync($"window.AddResize", "OnReSize",DotNetObjectReference.Create(this));
 }
 [JSInvokable("OnReSize")]
public void OnReSize(){
	Console.WriteLine("窗口触发ReSize事件");
}

或者还有更简单的方法，可以关注一下这个开源项目：
https://github.com/chrissainty/BlazorBrowserResize

本文为原创。

关注我的微信公众号
在公众号里留言交流
投稿邮箱：1052839972@qq.com

庭院深深深几许？杨柳堆烟，帘幕无重数。
玉勒雕鞍游冶处，楼高不见章台路。
雨横风狂三月暮。门掩黄昏，无计留春住。
泪眼问花花不语，乱红飞过秋千去。

如果感觉对您有帮助
欢迎向作者提供捐赠
这将是创作的最大动力