首页 > 其他分享 >BootstrapBlazor组件库更优雅的调用js方法

BootstrapBlazor组件库更优雅的调用js方法

时间:2023-08-06 11:23:40浏览次数:36  
标签:调用 js BootstrapBlazor init 组件 Live2DDisplay

BootstrapBlazor组件库更优雅的调用js方法

在blazor开发中,有时候需要去调用js代码来处理一些逻辑。使用BootstrapBlazor组件库自带的JSModuleAutoLoader特性可以帮助我们更加方便、简洁的去调用js

下面我们用Live2DDisplay这个组件为例

我们首先在razor文件中继承接口

@inherits BootstrapModuleComponentBase

然后引入特性,注意!这里要引用完整的js文件路径!

>@attribute [JSModuleAutoLoader("./_content/BootstrapBlazor.Live2DDisplay/Components/Live2DDisplay/Live2DDisplay.razor.js", AutoInvokeInit = false, JSObjectReference = true, AutoInvokeDispose = false)]

因为涉及到传参,我们需要重写InvokeInitAsync方法,如果不需要传参,可以把AutoInvokeInit设置为true,这样会自动调用init方法,就不用去重写了。

protected override async Task InvokeInitAsync()
{
    await InvokeVoidAsync("init", Id);
}

需要注意的是JSModuleAutoLoader默认是调用init方法

export function init(id) {
    //...
}

标签:调用,js,BootstrapBlazor,init,组件,Live2DDisplay
From: https://www.cnblogs.com/codecopier/p/17609183.html

相关文章