AddElementReferenceCapture 会报错很奇怪

doc/TDesign.Docs.ServerSide/Pages/_Layout.cshtml

@@ -50,5 +50,6 @@
     </div>
 
     <script src="_framework/blazor.server.js"></script>
+    <script src="_content/TDesign/tdesign-blazor.js"></script>
 </body>
 </html>

doc/TDesign.Docs.Shared/Layouts/NavMenu.razor

@@ -46,6 +46,7 @@
         <TMenuItem Link="components/dialog">Dialog 对话框</TMenuItem>
         <TMenuItem Link="components/message">Message 全局提示</TMenuItem>
         <TMenuItem Link="components/notification">Notification 消息通知</TMenuItem>
+        <TMenuItem Link="components/popup">Popup 弹出层</TMenuItem>
         </TMenuItemGroup>
 </TMenu>
 

package.json

@@ -1,5 +1,6 @@
 {
   "dependencies": {
+    "@popperjs/core": "^2.11.6",
     "tdesign-vue": "^0.46.1"
   }
 }

src/TDesign/Components/TPopup.cs

@@ -1,4 +1,5 @@
 using Microsoft.AspNetCore.Components.Rendering;
+using Microsoft.JSInterop;
 
 namespace TDesign;
 /// <summary>
@@ -14,25 +15,55 @@ public class TPopup : BlazorComponentBase, IHasChildContent, IHasActive
     [Parameter] public Placement Placement { get; set; } = Placement.TopCenter;
     [Parameter] public bool Active { get; set; }
 
+    ElementReference _elementReference;
     protected override void BuildRenderTree(RenderTreeBuilder builder)
     {
-        builder.CreateElement(0, "div", content =>
+        builder.OpenElement(0, "div");
+        builder.AddAttribute(1, "style", "position:relative");
+        builder.AddElementReferenceCapture(2, reference =>
         {
-            content.AddContent(0, ChildContent);
-            builder.CreateElement(1, "div", content =>
-            {
-                base.BuildRenderTree(content);
-            }, new
-            {
-                style = "width: 100%;top:0px",
-                @class = HtmlHelper.CreateCssBuilder().Append(Placement.GetCssClass())
-            });
-        }, new
-        {
-            style = "position:relative",
-            onmouseover = HtmlHelper.CreateCallback<MouseEventArgs>(this, Toggle),
-            onmouseout = HtmlHelper.CreateCallback<MouseEventArgs>(this, Toggle)
-        }); ;
+            _elementReference = reference;
+        });
+        //builder.AddChildContentAttribute(10, content =>
+        //{
+        //    content.AddContent(0, ChildContent);
+        //    builder.CreateElement(1, "div", content =>
+        //    {
+        //        base.BuildRenderTree(content);
+        //    }, new
+        //    {
+        //        style = "width: 100%;top:0px",
+        //        @class = HtmlHelper.CreateCssBuilder().Append(Placement.GetCssClass())
+        //    });
+        //});
+
+        //builder.CreateElement(0, "div", content =>
+        //{
+        //    content.AddContent(0, ChildContent);
+        //    builder.CreateElement(1, "div", content =>
+        //    {
+        //        base.BuildRenderTree(content);
+        //    }, new
+        //    {
+        //        style = "width: 100%;top:0px",
+        //        @class = HtmlHelper.CreateCssBuilder().Append(Placement.GetCssClass())
+        //    });
+        //}, 
+        //new
+        //{
+        //    style = "position:relative",
+        //    //onmouseover = HtmlHelper.CreateCallback<MouseEventArgs>(this, Toggle),
+        //    //onmouseout = HtmlHelper.CreateCallback<MouseEventArgs>(this, Toggle)
+        //}, appendFunc: (b, i)=>
+        //{
+        //    b.SetKey(this);
+        //    b.AddElementReferenceCapture(i+1, reference =>
+        //    {
+        //        _elementReference = reference;
+        //    });
+        //    return i;
+        //});
+        builder.CloseElement();
     }
 
     protected override void AddContent(RenderTreeBuilder builder, int sequence)
@@ -41,19 +72,13 @@ protected override void AddContent(RenderTreeBuilder builder, int sequence)
     }
     protected override void BuildStyle(IStyleBuilder builder)
     {
-        builder.Append("position: absolute; inset: auto auto 0px 0px; margin: 8px;", Active)
-            .Append("display:none", !Active)
-            ;
+        //builder.Append("position: absolute; inset: auto auto 0px 0px; margin: 8px;", Active)
+        //    .Append("display:none", !Active)
+        //    ;
     }
 
     public Task Toggle(MouseEventArgs e)
     {
-        _ = new Timer(_ =>
-        {
-            Active = !Active;
-            this.Refresh();
-
-        }, Active, 100, Timeout.Infinite);
-        return Task.CompletedTask;
+       return JS.Value.InvokeVoidAsync("tdesign.popup", new[] { _elementReference.Id, Content, "top" }).AsTask();
     }
 }

src/TDesign/TDesignComponentBase.cs

@@ -0,0 +1,10 @@
+using System;
+using System.Collections.Generic;
+using System.Linq;
+using System.Text;
+using System.Threading.Tasks;
+
+namespace TDesign;
+public class TDesignComponentBase:BlazorComponentBase
+{
+}

src/TDesign/wwwroot/tdesign-blazor.js

@@ -0,0 +1,7 @@
+window.tdesign = {
+    popup: function (reference, content, placement) {        
+        Popper.createPopper(reference, content, {
+            placement: placement
+        });
+    }
+}