taiwlind JavaScript 无法在 blazor .net8 中使用 @rendermode InteractiveWebAssembly 执行

问题描述 投票：0回答：1

我最近配置了一个具有自动渲染模式的 Blazor 项目，并结合了 Tailwind CSS。然而，当我在具有 

@rendermode InteractiveWebAssembly
属性的 Razor 页面中使用需要 flowbite.min.js 的组件时，我遇到了挑战。禁用此属性使 Tailwind 能够为这些组件正确运行，但会中断 
@onclick
事件的执行。这种困境迫使我们在最佳 Tailwind 性能和 Blazor 事件的正常运行之间进行权衡，具体取决于 
@rendermode InteractiveWebAssembly
的存在或不存在。

此代码使用 flowbite.min.js：

<button data-drawer-target="drawer-example" data-drawer-show="drawer-example" aria-controls="drawer-example" type="button">
    New Appointment
</button>
<div id="drawer-example" aria-labelledby="drawer-label">
</div>
<button id="blazor" @onclick="SomeFun" />

当不添加

@rendermode InteractiveWebAssembly
时，代码有效地将画布显示关闭（抽屉），但不会触发按钮（blazor）的点击事件。相反，当 @rendermode InteractiveWebAssembly 存在时，依赖于 flowbite.min.js 的代码将无法工作，但 blazor 按钮成功处理 
@onclick
事件。

这是我的App.razor：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <base href="/" />
    <link rel="stylesheet" href="app.css" />
    <link rel="icon" type="image/png" href="favicon.png" />
    <HeadOutlet />
</head>

<body class="p-5 bg-white dark:bg-gray-900 antialiased !p-0">
    <Routes />

    <script src="_framework/blazor.web.js"></script>
     <script src="js/flowbite.min.js"></script>
    <script src="js/site.js"></script>
 
  
</body>

</html>

我还必须提到，在 Microsoft 文档中，他们总是在不设置 

@rendermode
的情况下显示示例。

blazor tailwind-css flowbite
1个回答
0
投票

对于遇到类似问题的个人，我已通过以下链接成功找到了解决方案：https://github.com/themesberg/flowbite/pull/739/files。

如果您遵守 Flowbite 文档，可能不会产生预期的结果。请参阅 https://flowbite.com/docs/getting-started/blazor/#install-flowbite 了解更多信息。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.