@whitesev/pops 2.5.4 → 2.6.0

package/src/components/iframe/index.ts

@@ -4,7 +4,7 @@ import { PopsElementHandler } from "../../handler/PopsElementHandler";
 import { PopsHandler } from "../../handler/PopsHandler";
 import { PopsCSS } from "../../PopsCSS";
 import { PopsInstData } from "../../PopsInst";
-import type { PopsEventDetails } from "../../types/event";
+import type { PopsEventConfig } from "../../types/event";
 import { popsDOMUtils } from "../../utils/PopsDOMUtils";
 import { PopsInstanceUtils } from "../../utils/PopsInstanceUtils";
 import { popsUtils } from "../../utils/PopsUtils";
@@ -115,14 +115,14 @@ export const PopsIframe = {
     /**
      * 遮罩层元素
      */
-    let $mask: HTMLDivElement | null = null;
+    let $mask: HTMLDivElement | undefined = void 0;
     /**
      * 已创建的元素列表
      */
-    const elementList: HTMLElement[] = [$anim];
+    const $elList: HTMLElement[] = [$anim];
 
     if (config.mask.enable) {
-      const _handleMask_ = PopsHandler.handleMask({
+      const handleMask = PopsHandler.handleMask({
         type: popsType,
         guid: guid,
 
@@ -130,25 +130,24 @@ export const PopsIframe = {
         animElement: $anim,
         maskHTML: maskHTML,
       });
-      $mask = _handleMask_.maskElement;
-      elementList.push($mask);
+      $mask = handleMask.maskElement;
+      $elList.push($mask);
     }
 
-    const eventDetails = PopsHandler.handleEventDetails(
+    const evtConfig = PopsHandler.handleEventConfig(
+      config,
       guid,
       $shadowContainer,
       $shadowRoot,
       popsType,
       $anim,
-
-      $pops!,
-      $mask!,
-      config
-    ) as any as PopsEventDetails & {
+      $pops,
+      $mask
+    ) as any as PopsEventConfig & {
       iframeElement: HTMLIFrameElement;
     };
 
-    eventDetails["iframeElement"] = $iframe!;
+    evtConfig["iframeElement"] = $iframe!;
 
     popsDOMUtils.on($anim, popsDOMUtils.getAnimationEndNameList(), function () {
       /* 动画加载完毕 */
@@ -170,11 +169,11 @@ export const PopsIframe = {
         $title!.querySelector<HTMLElement>("p")!.innerText = $iframe!.contentDocument.title;
       }
 
-      config.loadEndCallBack(eventDetails);
+      config.loadEndCallBack(evtConfig);
     });
     /* 创建到页面中 */
 
-    popsDOMUtils.append($shadowRoot, elementList);
+    popsDOMUtils.append($shadowRoot, $elList);
     if (typeof config.beforeAppendToPageCallBack === "function") {
       config.beforeAppendToPageCallBack($shadowRoot, $shadowContainer);
     }
@@ -218,7 +217,7 @@ export const PopsIframe = {
         // 显示复位图标
         headerMiseBtnElement.style.setProperty("display", "");
         if (typeof config?.btn?.min?.callback === "function") {
-          config.btn.min.callback(eventDetails, event);
+          config.btn.min.callback(evtConfig, event);
         }
       },
       {
@@ -252,7 +251,7 @@ export const PopsIframe = {
         // 显示复位图标
         headerMiseBtnElement.style.setProperty("display", "");
         if (typeof config?.btn?.max?.callback === "function") {
-          config.btn.max.callback(eventDetails, event);
+          config.btn.max.callback(evtConfig, event);
         }
       },
       {
@@ -294,7 +293,7 @@ export const PopsIframe = {
           headerMiseBtnElement.style.setProperty("display", "none");
         }
         if (typeof config?.btn?.mise?.callback === "function") {
-          config.btn.mise.callback(eventDetails, event);
+          config.btn.mise.callback(evtConfig, event);
         }
       },
       {
@@ -310,7 +309,7 @@ export const PopsIframe = {
         event.stopPropagation();
         PopsInstanceUtils.removeInstance([PopsInstData.iframe], guid, false);
         if (typeof config?.btn?.close?.callback === "function") {
-          config.btn.close.callback(eventDetails, event);
+          config.btn.close.callback(evtConfig, event);
         }
       },
       {
@@ -329,7 +328,7 @@ export const PopsIframe = {
       $shadowRoot: $shadowRoot,
     });
 
-    const result = PopsHandler.handleResultDetails(eventDetails);
+    const result = PopsHandler.handleResultConfig(evtConfig);
     return result;
   },
 };

package/src/components/iframe/types/index.ts

@@ -1,6 +1,6 @@
 import type { PopsTitleConfig, PopsDragConfig, PopsCommonConfig } from "../../../types/components";
 
-import type { PopsEventDetails } from "../../../types/event";
+import type { PopsEventConfig } from "../../../types/event";
 
 /**
  * pops.iframe的按钮的点击回调参数event
@@ -65,7 +65,7 @@ export interface PopsIframeDetails extends PopsTitleConfig, PopsDragConfig, Pops
        * 点击的回调函数
        */
       callback: (
-        eventDetails: PopsEventDetails & {
+        eventConfig: PopsEventConfig & {
           iframeElement: HTMLIFrameElement;
         },
         event: MouseEvent | PointerEvent
@@ -79,7 +79,7 @@ export interface PopsIframeDetails extends PopsTitleConfig, PopsDragConfig, Pops
        * 点击的回调函数
        */
       callback: (
-        eventDetails: PopsEventDetails & {
+        eventConfig: PopsEventConfig & {
           iframeElement: HTMLIFrameElement;
         },
         event: MouseEvent | PointerEvent
@@ -93,7 +93,7 @@ export interface PopsIframeDetails extends PopsTitleConfig, PopsDragConfig, Pops
        * 点击的回调函数
        */
       callback: (
-        eventDetails: PopsEventDetails & {
+        eventConfig: PopsEventConfig & {
           iframeElement: HTMLIFrameElement;
         },
         event: MouseEvent | PointerEvent
@@ -107,7 +107,7 @@ export interface PopsIframeDetails extends PopsTitleConfig, PopsDragConfig, Pops
        * 点击的回调函数
        */
       callback: (
-        eventDetails: PopsEventDetails & {
+        eventConfig: PopsEventConfig & {
           iframeElement: HTMLIFrameElement;
         },
         event: MouseEvent | PointerEvent
@@ -132,7 +132,7 @@ export interface PopsIframeDetails extends PopsTitleConfig, PopsDragConfig, Pops
    * 加载完毕的回调
    */
   loadEndCallBack?: (
-    details: PopsEventDetails & {
+    details: PopsEventConfig & {
       iframeElement: HTMLIFrameElement;
     }
   ) => void;

package/src/components/loading/index.ts

@@ -56,15 +56,15 @@ export const PopsLoading = {
     /**
      * 遮罩层元素
      */
-    let $mask: HTMLDivElement | null = null;
+    let $mask: HTMLDivElement | undefined = void 0;
     /**
      * 已创建的元素列表
      */
-    const elementList: HTMLElement[] = [$anim];
+    const $elList: HTMLElement[] = [$anim];
 
     if (config.mask.enable) {
       // 创建遮罩层
-      const _handleMask_ = PopsHandler.handleMask({
+      const handleMask = PopsHandler.handleMask({
         type: PopsType,
         guid: guid,
 
@@ -72,11 +72,11 @@ export const PopsLoading = {
         animElement: $anim,
         maskHTML: maskHTML,
       });
-      $mask = _handleMask_.maskElement;
-      elementList.push($mask);
+      $mask = handleMask.maskElement;
+      $elList.push($mask);
     }
-    const eventDetails = PopsHandler.handleLoadingEventDetails(guid, PopsType, $anim, $pops!, $mask!, config);
-    popsDOMUtils.append(config.parent, elementList);
+    const evtConfig = PopsHandler.handleLoadingEventConfig(config, guid, PopsType, $anim, $pops, $mask);
+    popsDOMUtils.append(config.parent, $elList);
     if ($mask != null) {
       $anim.after($mask);
     }
@@ -93,7 +93,7 @@ export const PopsLoading = {
       popsDOMUtils.css($anim, "position", "absolute !important");
       $mask && popsDOMUtils.css($mask, "position", "absolute !important");
     }
-    const result = PopsHandler.handleResultDetails(eventDetails);
+    const result = PopsHandler.handleResultConfig(evtConfig);
     return result;
   },
 };

package/src/components/panel/index.css

@@ -278,6 +278,9 @@ section.pops-panel-container .pops-panel-forms-fold .pops-panel-forms-container-
   .pops[type-value="panel"] section.pops-panel-container > ul > li div:nth-child(2) {
     max-width: 55%;
   }
+  .pops[type-value="panel"] section.pops-panel-container > ul > li .pops-panel-input span.pops-panel-input__suffix {
+    padding: 0 4px;
+  }
   .pops[type-value="panel"] section.pops-panel-container .pops-panel-select select {
     min-width: 88px !important;
     width: -webkit-fill-available;
@@ -668,6 +671,7 @@ section.pops-panel-container .pops-panel-slider input[type="range"]::-moz-range-
   background-color: var(--pops-panel-components-input-bg-color);
   position: relative;
   box-shadow: none;
+  width: 200px;
 }
 .pops-panel-input:hover {
   border: 1px solid var(--pops-panel-components-input-hover-bd-color);
@@ -724,7 +728,7 @@ section.pops-panel-container .pops-panel-slider input[type="range"]::-moz-range-
   transition: all 0.3s;
   pointer-events: none;
   padding: 0 8px;
-  position: absolute;
+  position: relative;
   right: 0px;
   border-top-right-radius: 4px;
   border-bottom-right-radius: 4px;
@@ -746,6 +750,13 @@ section.pops-panel-container .pops-panel-slider input[type="range"]::-moz-range-
 .pops-panel-input:active span.pops-panel-input__suffix:has(svg[data-type="circleClose"]) {
   display: inline-flex;
 }
+/* 当清空图标显示时，则隐藏输入框的padding-right */
+.pops-panel-input:hover:has(span.pops-panel-input__suffix svg[data-type="circleClose"]) input,
+.pops-panel-input:focus:has(span.pops-panel-input__suffix svg[data-type="circleClose"]) input,
+.pops-panel-input:focus-within:has(span.pops-panel-input__suffix svg[data-type="circleClose"]) input,
+.pops-panel-input:active:has(span.pops-panel-input__suffix svg[data-type="circleClose"]) input {
+  padding-right: 0;
+}
 .pops-panel-input .pops-panel-icon {
   cursor: pointer;
 }

package/src/components/panel/index.ts

@@ -129,41 +129,41 @@ export const PopsPanel = {
     /**
      * 遮罩层元素
      */
-    let $mask: HTMLDivElement | null = null;
+    let $mask: HTMLDivElement | undefined = void 0;
     /**
      * 已创建的元素列表
      */
-    const isCreatedElementList: HTMLElement[] = [$anim];
+    const $elList: HTMLElement[] = [$anim];
 
     /* 遮罩层元素 */
     if (config.mask.enable) {
-      const { maskElement } = PopsHandler.handleMask({
+      const handleMask = PopsHandler.handleMask({
         type: popsType,
         guid: guid,
         config: config,
         animElement: $anim,
         maskHTML: maskHTML,
       });
-      $mask = maskElement;
-      isCreatedElementList.push($mask);
+      $mask = handleMask.maskElement;
+      $elList.push($mask);
     }
 
     /* 处理返回的配置 */
-    const eventDetails = PopsHandler.handleEventDetails(
+    const evtConfig = PopsHandler.handleEventConfig(
+      config,
       guid,
       $shadowContainer,
       $shadowRoot,
       popsType,
       $anim,
       $pops,
-      $mask!,
-      config
+      $mask
     );
     /* 为顶部右边的关闭按钮添加点击事件 */
-    PopsHandler.handleClickEvent("close", $headerBtnClose, eventDetails, config.btn.close!.callback!);
+    PopsHandler.handleClickEvent("close", $headerBtnClose, evtConfig, config.btn?.close?.callback);
 
     /* 创建到页面中 */
-    popsDOMUtils.append($shadowRoot, isCreatedElementList);
+    popsDOMUtils.append($shadowRoot, $elList);
     if (typeof config.beforeAppendToPageCallBack === "function") {
       config.beforeAppendToPageCallBack($shadowRoot, $shadowContainer);
     }
@@ -209,7 +209,7 @@ export const PopsPanel = {
         endCallBack: config.dragEndCallBack,
       });
     }
-    const result = PopsHandler.handleResultDetails(eventDetails);
+    const result = PopsHandler.handleResultConfig(evtConfig);
 
     return {
       ...result,

package/src/components/prompt/index.ts

@@ -104,76 +104,75 @@ export const PopsPrompt = {
     /**
      * 遮罩层元素
      */
-    let $mask: HTMLDivElement | null = null;
+    let $mask: HTMLDivElement | undefined = void 0;
 
     /**
      * 已创建的元素列表
      */
-    const elementList: HTMLElement[] = [$anim];
+    const $elList: HTMLElement[] = [$anim];
 
     if (config.mask.enable) {
       // 启用遮罩层
-      const _handleMask_ = PopsHandler.handleMask({
+      const handleMask = PopsHandler.handleMask({
         type: popsType,
         guid: guid,
         config: config,
         animElement: $anim,
         maskHTML: maskHTML,
       });
-      $mask = _handleMask_.maskElement;
-      elementList.push($mask);
+      $mask = handleMask.maskElement;
+      $elList.push($mask);
     }
-    const eventDetails = PopsHandler.handleEventDetails(
+    const evtConfig = PopsHandler.handleEventConfig(
+      config,
       guid,
       $shadowContainer,
       $shadowRoot,
       popsType,
       $anim,
-
-      $pops!,
-      $mask!,
-      config
+      $pops,
+      $mask
     );
     /* 输入框赋值初始值 */
 
-    $input!.value = config.content.text;
+    $input.value = config.content.text;
     PopsHandler.handlePromptClickEvent(
       "close",
-      $input!,
-      $btnClose!,
-      eventDetails,
+      $input,
+      $btnClose,
+      evtConfig,
 
-      config.btn.close!.callback!
+      config.btn.close.callback
     );
 
     PopsHandler.handlePromptClickEvent(
       "ok",
-      $input!,
-      $btnOk!,
-      eventDetails,
+      $input,
+      $btnOk,
+      evtConfig,
 
-      config.btn.ok!.callback!
+      config.btn.ok.callback
     );
     PopsHandler.handlePromptClickEvent(
       "cancel",
-      $input!,
-      $btnCancel!,
-      eventDetails,
+      $input,
+      $btnCancel,
+      evtConfig,
 
-      config.btn.cancel!.callback!
+      config.btn.cancel.callback
     );
 
     PopsHandler.handlePromptClickEvent(
       "other",
-      $input!,
-      $btnOther!,
-      eventDetails,
+      $input,
+      $btnOther,
+      evtConfig,
 
-      config.btn.other!.callback!
+      config.btn.other.callback
     );
     /* 创建到页面中 */
 
-    popsDOMUtils.append($shadowRoot, elementList);
+    popsDOMUtils.append($shadowRoot, $elList);
     if (typeof config.beforeAppendToPageCallBack === "function") {
       config.beforeAppendToPageCallBack($shadowRoot, $shadowContainer);
     }
@@ -210,7 +209,7 @@ export const PopsPrompt = {
     if (config.content.select) {
       $input.select();
     }
-    const result = PopsHandler.handleResultDetails(eventDetails);
+    const result = PopsHandler.handleResultConfig(evtConfig);
     return result;
   },
 };

package/src/components/rightClickMenu/config.ts

@@ -5,6 +5,7 @@ export const rightClickMenuConfig = (): DeepRequired<PopsRightClickMenuDetails>
   return {
     target: document.documentElement,
     targetSelector: null,
+    position: "fixed",
     data: [
       {
         icon: PopsIcon.getIcon("search")!,
@@ -94,5 +95,7 @@ export const rightClickMenuConfig = (): DeepRequired<PopsRightClickMenuDetails>
     preventDefault: true,
     style: null,
     beforeAppendToPageCallBack() {},
+    limitPositionXInView: true,
+    limitPositionYInView: true,
   };
 };

package/src/components/rightClickMenu/index.css

@@ -30,6 +30,9 @@
   -webkit-backdrop-filter: var(--pops-right-context-backdrop-filter);
   backdrop-filter: var(--pops-right-context-backdrop-filter);
 }
+.pops-rightClickMenu[data-position="absolute"] {
+  position: absolute;
+}
 /* scale动画 */
 .pops-rightClickMenu-anim-scale {
   transition:

package/src/components/rightClickMenu/index.ts

@@ -47,7 +47,7 @@ export const PopsRightClickMenu = {
     ]);
 
     if (config.style != null) {
-      const cssNode = popsDOMUtils.createElement(
+      const $css = popsDOMUtils.createElement(
         "style",
         {
           innerHTML: config.style,
@@ -56,7 +56,7 @@ export const PopsRightClickMenu = {
           type: "text/css",
         }
       );
-      $shadowRoot.appendChild(cssNode);
+      $shadowRoot.appendChild($css);
     }
 
     const PopsContextMenu = {
@@ -132,7 +132,7 @@ export const PopsRightClickMenu = {
        * @param event
        * @param selectorTarget
        */
-      contextMenuEvent(event: PointerEvent, selectorTarget: HTMLElement) {
+      contextMenuEvent(event: PointerEvent, selectorTarget: NonNullable<PopsRightClickMenuDetails["target"]>) {
         if (config.preventDefault) {
           popsDOMUtils.preventEvent(event);
         }
@@ -140,6 +140,7 @@ export const PopsRightClickMenu = {
         if (PopsContextMenu.rootElement) {
           PopsContextMenu.closeAllMenu(PopsContextMenu.rootElement);
         }
+        selectorTarget = selectorTarget ?? config.target;
         const rootElement = PopsContextMenu.showMenu(event, config.data, selectorTarget);
         PopsContextMenu.rootElement = rootElement;
         if (config.only) {
@@ -186,7 +187,6 @@ export const PopsRightClickMenu = {
           });
           $menu.remove();
         };
-        popsDOMUtils.containsClassName;
         if (popsDOMUtils.containsClassName($menu, `pops-${popsType}-anim-show`)) {
           /* 有动画 */
           popsDOMUtils.on($menu, popsDOMUtils.getTransitionEndNameList(), transitionEndEvent, {
@@ -233,10 +233,16 @@ export const PopsRightClickMenu = {
        * @param isChildren 是否是rightClickMenu的某一项的子菜单
        */
       createMenuContainerElement(isChildren: boolean) {
-        const $menu = popsDOMUtils.createElement("div", {
-          className: `pops-${popsType}`,
-          innerHTML: /*html*/ `<ul class="pops-${popsType}-wrapper"></ul>`,
-        });
+        const $menu = popsDOMUtils.createElement(
+          "div",
+          {
+            className: `pops-${popsType}`,
+            innerHTML: /*html*/ `<ul class="pops-${popsType}-wrapper"></ul>`,
+          },
+          {
+            "data-position": config.position,
+          }
+        );
         const zIndex = this.getMenuZIndex();
         if (zIndex > 10000) {
           $menu.style.zIndex = zIndex.toString();
@@ -287,8 +293,13 @@ export const PopsRightClickMenu = {
          * 限制的间隙距离
          */
         const limitDistance = 1;
-        const maxPageLeftOffset = popsDOMUtils.width(globalThis) - limitDistance;
-        const maxPageTopOffset = popsDOMUtils.height(globalThis) - limitDistance;
+        let maxPageLeftOffset = popsDOMUtils.width(globalThis) - limitDistance;
+        let maxPageTopOffset = popsDOMUtils.height(globalThis) - limitDistance;
+        if (config.position === "absolute") {
+          // 添加滚动距离
+          maxPageLeftOffset += globalThis.scrollX;
+          maxPageTopOffset += globalThis.scrollY;
+        }
         /* left最大偏移 */
         const maxLeftOffset = maxPageLeftOffset - menuElementWidth;
         /* top最大偏移 */
@@ -299,8 +310,10 @@ export const PopsRightClickMenu = {
         let currentLeftOffset = mousePosition.x;
         let currentTopOffset = mousePosition.y;
         currentLeftOffset = currentLeftOffset < 0 ? 0 : currentLeftOffset;
+        currentTopOffset = currentTopOffset < 0 ? 0 : currentTopOffset;
+
         // 不允许超出left最大值
-        if (currentLeftOffset + chileMenuLeftOrRightDistance >= maxLeftOffset) {
+        if (config.limitPositionXInView && currentLeftOffset + chileMenuLeftOrRightDistance >= maxLeftOffset) {
           // 超过，那么子菜单将会在放在左边
           // 偏移计算方式就是父菜单的右偏移+父菜单的宽度
           if (parentInfo) {
@@ -326,8 +339,7 @@ export const PopsRightClickMenu = {
           Reflect.deleteProperty(result, "right");
         }
         // 不允许超出top最大值
-        currentTopOffset = currentTopOffset < 0 ? 0 : currentTopOffset;
-        if (currentTopOffset + childMenuTopOrBottomDistance >= maxTopOffset) {
+        if (config.limitPositionYInView && currentTopOffset + childMenuTopOrBottomDistance >= maxTopOffset) {
           // 超过，那么子菜单将会在放在上面
           if (parentInfo) {
             // 以项的top偏移为基准
@@ -347,6 +359,7 @@ export const PopsRightClickMenu = {
           Reflect.deleteProperty(result, "top");
         } else {
           currentTopOffset = currentTopOffset + childMenuTopOrBottomDistance;
+          // 底部偏移
           result.top = currentTopOffset;
           Reflect.deleteProperty(result, "bottom");
         }
@@ -358,7 +371,11 @@ export const PopsRightClickMenu = {
        * @param _config_
        * @param menuListenerRootNode 右键菜单监听的元素
        */
-      showMenu(menuEvent: PointerEvent, _config_: PopsRightClickMenuDataDetails[], menuListenerRootNode: HTMLElement) {
+      showMenu(
+        menuEvent: PointerEvent,
+        _config_: PopsRightClickMenuDataDetails[],
+        menuListenerRootNode: NonNullable<PopsRightClickMenuDetails["target"]>
+      ) {
         const menuElement = this.createMenuContainerElement(false);
         Reflect.set(menuElement, "__menuData__", {
           child: [],
@@ -395,7 +412,7 @@ export const PopsRightClickMenu = {
         _config_: PopsRightClickMenuDataDetails[],
         rootElement: HTMLDivElement,
         targetLiElement: HTMLLIElement,
-        menuListenerRootNode: HTMLElement
+        menuListenerRootNode: NonNullable<PopsRightClickMenuDetails["target"]>
       ) {
         const menuElement = this.createMenuContainerElement(true);
         Reflect.set(menuElement, "__menuData__", {
@@ -467,7 +484,7 @@ export const PopsRightClickMenu = {
         rootElement: HTMLDivElement,
         menuElement: HTMLDivElement,
         _config_: PopsRightClickMenuDataDetails[],
-        menuListenerRootNode: HTMLElement
+        menuListenerRootNode: NonNullable<PopsRightClickMenuDetails["target"]>
       ) {
         const menuEventTarget = menuEvent.target;
         const menuULElement = menuElement.querySelector<HTMLUListElement>("ul")!;
@@ -592,11 +609,26 @@ export const PopsRightClickMenu = {
     PopsContextMenu.addWindowCheckClickListener();
     return {
       guid: guid,
-      config: config,
-      removeWindowCheckClickListener: PopsContextMenu.removeWindowCheckClickListener,
+      config: config as DeepRequired<PopsRightClickMenuDetails>,
       addWindowCheckClickListener: PopsContextMenu.addWindowCheckClickListener,
-      removeContextMenuEvent: PopsContextMenu.removeContextMenuEvent,
+      removeWindowCheckClickListener: PopsContextMenu.removeWindowCheckClickListener,
       addContextMenuEvent: PopsContextMenu.addContextMenuEvent,
+      removeContextMenuEvent: PopsContextMenu.removeContextMenuEvent,
+      /**
+       * 移除初始化时的添加的监听事件
+       */
+      removeInitEventListener: {
+        contextMenu() {
+          PopsContextMenu.removeContextMenuEvent(config.target as Window, config.targetSelector!);
+        },
+        windowClick() {
+          PopsContextMenu.removeWindowCheckClickListener();
+        },
+      },
+      /**
+       * 操作弹出菜单的对象
+       */
+      PopsContextMenu: PopsContextMenu,
     };
   },
 };

package/src/components/rightClickMenu/types/index.ts

@@ -35,7 +35,7 @@ export interface PopsRightClickMenuDataDetails {
     clickEvent: PointerEvent,
     contextMenuEvent: PointerEvent,
     liElement: HTMLLIElement,
-    menuListenerRootNode: HTMLElement
+    menuListenerRootNode: NonNullable<PopsRightClickMenuDetails["target"]>
   ) => boolean | void | Promise<boolean | void>;
   /**
    * 子项配置
@@ -55,8 +55,14 @@ export interface PopsRightClickMenuDetails
   target?: HTMLElement | Window | EventTarget | Node;
   /**
    * 目标的子元素选择器，默认为空
+   * @default null
    */
   targetSelector?: string | null;
+  /**
+   * 位置
+   * @default "fixed"
+   */
+  position?: "absolute" | "fixed";
   /**
    * 右键菜单数据
    */
@@ -95,4 +101,14 @@ export interface PopsRightClickMenuDetails
    * @default false
    */
   preventDefault?: boolean;
+  /**
+   * 限制x位置在当前视窗内
+   * @default true
+   */
+  limitPositionXInView?: boolean;
+  /**
+   * 限制y位置在当前视窗内
+   * @default true
+   */
+  limitPositionYInView?: boolean;
 }