feat(modal): 新增自定义zIndex功能 (#2849)

* feat(modal): 新增自定义zIndex功能(#2848) * chore(modal): 生成变更记录文件 * chore(modal): 代码规范 --------- Co-authored-by: xiamiao <[email protected]>
XiaoMi · Jun 28, 2024 · 85307a4 · 85307a4
1 parent e37e761
commit 85307a4
Show file tree

Hide file tree

Showing 4 changed files with 18 additions and 0 deletions.
diff --git a/.changeset/five-ads-drum.md b/.changeset/five-ads-drum.md
@@ -0,0 +1,5 @@
+---
+"@hi-ui/hiui": patch
+---
+
+feat(modal): 新增自定义 zIndex 功能
diff --git a/.changeset/twenty-ligers-flash.md b/.changeset/twenty-ligers-flash.md
@@ -0,0 +1,5 @@
+---
+"@hi-ui/modal": minor
+---
+
+feat: 新增自定义 zIndex 功能
diff --git a/packages/ui/modal/src/Modal.tsx b/packages/ui/modal/src/Modal.tsx
@@ -266,6 +266,10 @@ export interface ModalProps extends HiBaseHTMLProps<'div'>, UseModalProps {
    * 弹出层高度设置
    */
   height?: React.ReactText
+  /**
+   * 自定义css展示层级
+   */
+  zIndex?: number
   /**
    * 是否显示蒙层
    */

diff --git a/packages/ui/modal/src/use-modal.ts b/packages/ui/modal/src/use-modal.ts
@@ -158,6 +158,10 @@ export const useModal = ({
         style.display = 'none'
       }
 
+      if (Object.prototype.hasOwnProperty.call(props, 'zIndex')) {
+        style.zIndex = props.zIndex
+      }
+
       return {
         role: 'dialog',
         'aria-modal': true,