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

* feat(modal): 新增自定义zIndex功能(XiaoMi#2848) * chore(modal): 生成变更记录文件 * chore(modal): 代码规范 --------- Co-authored-by: xiamiao <[email protected]>
yang-x20 · Jun 28, 2024 · 9e0ca28 · 9e0ca28
1 parent 8dc9afe
commit 9e0ca28
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,