feat: 弹出框增加位置属性

src/BootstrapBlazor/Components/Popover/PopoverConfirm.razor

@@ -1,7 +1,7 @@
 @namespace BootstrapBlazor.Components
 @inherits PopoverConfirmBase
 
-<div @attributes="@AdditionalAttributes" class="@ClassName" role="tooltip" id="@Id" aria-hidden="false" tabindex="0" @ref="ConfirmPopover" style="@StyleName">
+<div @attributes="@AdditionalAttributes" class="@ClassName" role="tooltip" id="@Id" aria-hidden="false" tabindex="0" @ref="ConfirmPopover" style="@StyleName" placement="@PlacementString">
     @if (!string.IsNullOrEmpty(Title))
     {
         <h3 class="popover-confirm-header">@Title</h3>

src/BootstrapBlazor/Components/Popover/PopoverConfirmBase.cs

@@ -32,23 +32,32 @@ namespace BootstrapBlazor.Components
             .Build();
 
         /// <summary>
-        /// 获得/设置 图标样式
+        /// 获得 图标样式
         /// </summary>
         protected string? IconClass => CssBuilder.Default("fa")
             .AddClass(Icon)
             .Build();
 
         /// <summary>
-        /// 获得/设置 组件样式信息
+        /// 获得 组件样式信息
         /// </summary>
         protected string? StyleName => CssBuilder.Default()
-            .AddClass($"left: -{MarginX:f2}px", MarginX.HasValue)
+            .AddClass($"left: {Offset?.MarginX}px;", Offset != null)
+            .AddClass($"top: {Offset?.MarginY}px;", Offset != null)
             .Build();
 
         /// <summary>
-        /// 获得/设置 X 轴偏移量
+        /// 获得 确认框位置信息
         /// </summary>
-        protected float? MarginX { get; set; }
+        protected string? PlacementString => CssBuilder.Default()
+            .AddClass("bottom", Placement == Placement.Bottom)
+            .AddClass("top", Placement != Placement.Bottom)
+            .Build();
+
+        /// <summary>
+        /// 获得/设置 确认框偏移位置信息
+        /// </summary>
+        protected Offset? Offset { get; set; }
 
         /// <summary>
         /// 获得/设置 确认弹框实例
@@ -70,6 +79,11 @@ namespace BootstrapBlazor.Components
         /// </summary>
         [Parameter] public string Content { get; set; } = "Popover Confirm";
 
+        /// <summary>
+        /// 获得/设置 确认框弹出位置 默认为 top 上方
+        /// </summary>
+        [Parameter] public Placement Placement { get; set; } = Placement.Top;
+
         /// <summary>
         /// 获得/设置 关闭按钮显示文字
         /// </summary>
@@ -114,7 +128,7 @@ namespace BootstrapBlazor.Components
             // 计算位移量
             if (JSRuntime != null)
             {
-                MarginX = await JSRuntime.Confirm(ConfirmPopover);
+                Offset = await JSRuntime.Confirm(ConfirmPopover);
                 IsShow = true;
                 await InvokeAsync(StateHasChanged);
             }

src/BootstrapBlazor/Enums/Offset.cs

@@ -0,0 +1,18 @@
+namespace BootstrapBlazor.Components
+{
+    /// <summary>
+    /// 物体偏移量类
+    /// </summary>
+    public class Offset
+    {
+        /// <summary>
+        /// 获得/设置 X 轴偏移量
+        /// </summary>
+        public int MarginX { get; set; }
+
+        /// <summary>
+        /// 获得/设置 Y 轴偏移量
+        /// </summary>
+        public int MarginY { get; set; }
+    }
+}

src/BootstrapBlazor/Extensions/JSRuntimeExtensions.cs

@@ -75,6 +75,6 @@ namespace BootstrapBlazor.Components
         /// </summary>
         /// <param name="jsRuntime"></param>
         /// <param name="element"></param>
-        public static async ValueTask<float> Confirm(this IJSRuntime jsRuntime, ElementReference element) => await jsRuntime.InvokeAsync<float>("$.confirm", element);
+        public static async ValueTask<Offset> Confirm(this IJSRuntime jsRuntime, ElementReference element) => await jsRuntime.InvokeAsync<Offset>("$.confirm", element);
     }
 }

src/BootstrapBlazor/wwwroot/css/bootstrap.blazor.css

@@ -913,6 +913,7 @@ a {
     box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
     word-break: break-all;
     z-index: 10;
+    outline: none;
 }
 
 .popover-confirm-body {
@@ -932,4 +933,61 @@ a {
         .popover-confirm-buttons .btn:last-child {
             margin-left: 0.5rem;
         }
+
+.popover-confirm-arrow {
+    border-width: 6px;
+    filter: drop-shadow(0 2px 12px rgba(0,0,0,.03));
+}
+
+    .popover-confirm-arrow:after {
+        content: " ";
+        border-width: 6px;
+    }
+
+    .popover-confirm-arrow, .popover-confirm-arrow:after {
+        position: absolute;
+        display: block;
+        width: 0;
+        height: 0;
+        border-color: transparent;
+        border-style: solid;
+    }
+
+.popover-confirm[placement^=bottom] {
+    margin-top: 8px;
+}
+
+    .popover-confirm[placement^=bottom] .popover-confirm-arrow {
+        top: -6px;
+        left: 50%;
+        margin-right: 3px;
+        border-top-width: 0;
+        border-bottom-color: #ebeef5;
+    }
+
+        .popover-confirm[placement^=bottom] .popover-confirm-arrow:after {
+            top: 1px;
+            margin-left: -6px;
+            border-top-width: 0;
+            border-bottom-color: #fff;
+        }
+
+.popover-confirm[placement^=top] {
+    margin-top: -8px;
+}
+
+    .popover-confirm[placement^=top] .popover-confirm-arrow {
+        bottom: -6px;
+        left: 50%;
+        margin-right: 3px;
+        border-top-color: #ebeef5;
+        border-bottom-width: 0;
+    }
+
+        .popover-confirm[placement^=top] .popover-confirm-arrow:after {
+            bottom: 1px;
+            margin-left: -6px;
+            border-top-color: #fff;
+            border-bottom-width: 0;
+        }
 /*end confirm*/

src/BootstrapBlazor/wwwroot/js/bootstrap.blazor.js

@@ -288,11 +288,23 @@
 
             // 获得 button 大小
             var width = $button.outerWidth();
+            var height = $button.outerHeight();
+
+            // check top or bottom
+            var placement = $ele.attr('placement');
 
             // 设置自己位置
-            var margin = ($ele.outerWidth() - width) / 2;
+            var marginX = 0;
-            console.log(margin);
+            var marginY = 0;
-            return margin;
+            if (placement === 'top') {
+                marginX = 0 - Math.ceil(($ele.outerWidth() - width) / 2);
+                marginY = 0 - $ele.outerHeight();
+            }
+            else if (placement === 'bottom') {
+                marginX = 0 - Math.ceil(($ele.outerWidth() - width) / 2);
+                marginY = height;
+            }
+            return { MarginX: marginX, MarginY: marginY };
         }
     });