fix: overlay 的 zIndex 属性改为 css 变量

src/packages/overlay/demo.taro.tsx

@@ -108,7 +108,7 @@ const OverlayDemo = () => {
           <Overlay
             visible={visible}
             onClick={onClose}
-            zIndex={2020}
+            style={{ '--nutui-overlay-zIndex': 2020 }}
             afterShow={() => {
               console.log('afterShow')
             }}
@@ -123,9 +123,9 @@ const OverlayDemo = () => {
           <Overlay
             visible={visible2}
             onClick={onClose2}
-            zIndex={2000}
             style={{
               backgroundColor: 'rgba(0, 0, 0, .2)',
+              '--nutui-overlay-zIndex': 2000,
             }}
           />
         </Cell>

src/packages/overlay/demo.tsx

@@ -104,7 +104,7 @@ const OverlayDemo = () => {
           <Overlay
             visible={visible}
             onClick={onClose}
-            zIndex={2020}
+            style={{ '--nutui-overlay-zIndex': 2020 }}
             afterShow={() => {
               console.log('afterShow')
             }}
@@ -122,9 +122,9 @@ const OverlayDemo = () => {
           <Overlay
             visible={visible2}
             onClick={onClose2}
-            zIndex={2000}
             style={{
               backgroundColor: 'rgba(0, 0, 0, .2)',
+              '--nutui-overlay-zIndex': 2000,
             }}
           />
         </Cell>

src/packages/overlay/doc.en-US.md

@@ -36,7 +36,7 @@ const App = () => {
       <Overlay
         visible={visible}
         onClick={onClose}
-        zIndex={2020}
+        style={{'--nutui-overlay-zIndex': 2000,}}
         afterShow={() => {
           console.log('afterShow')
         }}
@@ -73,9 +73,9 @@ const App = () => {
       <Overlay
         visible={visible}
         onClick={onClose}
-        zIndex={2000}
         style={{
           backgroundColor: 'rgba(0, 0, 0, .2)',
+          '--nutui-overlay-zIndex': 2000,
         }}
       />
     </>
@@ -248,7 +248,6 @@ export default App;
 | Property | Description | Type | Default |
 | --- | --- | --- | --- |
 | visible | Whether the current component is displayed | `boolean` | `false` |
-| zIndex | Mask hierarchy | `number` | `2000` |
 | duration | Animation duration, in ms | `number` | `300` |
 | lockScroll | Whether the background is locked | `boolean` | `true` |
 | closeOnOverlayClick | Tap Mask off | `boolean` | `true` |
@@ -265,6 +264,7 @@ The component provides the following CSS variables, which can be used to customi
 | Name | Description | Default Value |
 | --- | --- | --- |
 | \--nutui-overlay-bg-color | Overlay background color | `$gray7` |
+| \--nutui-overlay-zIndex | z-index | `1000` |
 | \--nutui-overlay-content-bg-color | Mask layer nested content background color | `$gray6` |
 | \--nutui-overlay-content-color | Mask layer nested content font color | `$gray1` |
 | \--nutui-overlay-animation-duration| Mask layer nested content animation duration | `0.3s` |

src/packages/overlay/doc.md

@@ -36,7 +36,7 @@ const App = () => {
       <Overlay
         visible={visible}
         onClick={onClose}
-        zIndex={2020}
+        style={{'--nutui-overlay-zIndex': 2020,}}
         afterShow={() => {
           console.log('afterShow')
         }}
@@ -73,9 +73,9 @@ const App = () => {
       <Overlay
         visible={visible}
         onClick={onClose}
-        zIndex={2000}
         style={{
           backgroundColor: 'rgba(0, 0, 0, .2)',
+          '--nutui-overlay-zIndex': 2000,
         }}
       />
     </>
@@ -248,7 +248,6 @@ export default App;
 | 属性 | 说明 | 类型 | 默认值 |
 | --- | --- | --- | --- |
 | visible | 当前组件是否显示 | `boolean` | `false` |
-| zIndex | 遮罩层级 | `number` | `2000` |
 | duration | 动画时长，单位毫秒 | `number` | `300` |
 | lockScroll | 背景是否锁定 | `boolean` | `true` |
 | closeOnOverlayClick | 是否点击遮罩关闭 | `boolean` | `true` |
@@ -265,6 +264,7 @@ export default App;
 | 名称 | 说明 | 默认值 |
 | --- | --- | --- |
 | \--nutui-overlay-bg-color | 遮罩层背景颜色 | `$gray7` |
+| \--nutui-overlay-zIndex | overlay 的 z-index | `1000` |
 | \--nutui-overlay-content-bg-color | 遮罩层嵌套内容背景颜色 | `$gray6` |
 | \--nutui-overlay-content-color | 遮罩层嵌套内容字体颜色 | `$gray1` |
 | \--nutui-overlay-animation-duration| 遮罩层动画延时的时长 | `0.3s` |

src/packages/overlay/doc.taro.md

@@ -36,7 +36,7 @@ const App = () => {
       <Overlay
         visible={visible}
         onClick={onClose}
-        zIndex={2020}
+        style={{'--nutui-overlay-zIndex': 2020,}}
         lockScroll
         afterShow={() => {
           console.log('afterShow')
@@ -74,9 +74,9 @@ const App = () => {
       <Overlay
         visible={visible}
         onClick={onClose}
-        zIndex={2000}
         style={{
           backgroundColor: 'rgba(0, 0, 0, .2)',
+          '--nutui-overlay-zIndex': 2000,
         }}
       />
     </>
@@ -249,7 +249,6 @@ export default App;
 | 属性 | 说明 | 类型 | 默认值 |
 | --- | --- | --- | --- |
 | visible | 当前组件是否显示 | `boolean` | `false` |
-| zIndex | 遮罩层级 | `number` | `2000` |
 | duration | 动画时长，单位毫秒 | `number` | `300` |
 | lockScroll | 背景是否锁定 | `boolean` | `true` |
 | closeOnOverlayClick | 是否点击遮罩关闭 | `boolean` | `true` |
@@ -266,6 +265,7 @@ export default App;
 | 名称 | 说明 | 默认值 |
 | --- | --- | --- |
 | \--nutui-overlay-bg-color | 遮罩层背景颜色 | `$gray7` |
+| \--nutui-overlay-zIndex | overlay 的 z-index | `1000` |
 | \--nutui-overlay-content-bg-color | 遮罩层嵌套内容背景颜色 | `$gray6` |
 | \--nutui-overlay-content-color | 遮罩层嵌套内容字体颜色 | `$gray1` |
 | \--nutui-overlay-animation-duration| 遮罩层动画延时的时长 | `0.3s` |

src/packages/overlay/doc.zh-TW.md

@@ -36,7 +36,7 @@ const App = () => {
       <Overlay
         visible={visible}
         onClick={onClose}
-        zIndex={2020}
+        style={{'--nutui-overlay-zIndex': 2000,}}
         afterShow={() => {
           console.log('afterShow')
         }}
@@ -73,9 +73,9 @@ const App = () => {
       <Overlay
         visible={visible}
         onClick={onClose}
-        zIndex={2000}
         style={{
           backgroundColor: 'rgba(0, 0, 0, .2)',
+          '--nutui-overlay-zIndex': 2000,
         }}
       />
     </>
@@ -247,7 +247,6 @@ export default App;
 | 屬性 | 說明 | 類型 | 默認值 |
 | --- | --- | --- | --- |
 | visible | 當前組件是否顯示 | `boolean` | `false` |
-| zIndex | 遮罩層級 | `number` | `2000` |
 | duration | 動畫時長，單位秒 | `number` | `0.3` |
 | lockScroll | 背景是否鎖定 | `boolean` | `true` |
 | closeOnOverlayClick | 是否點擊遮罩關閉 | `boolean` | `true` |
@@ -264,5 +263,6 @@ export default App;
 | 名稱 | 說明 | 默認值 |
 | --- | --- | --- |
 | \--nutui-overlay-bg-color | 遮罩層背景顏色 | `$gray7` |
+| \--nutui-overlay-zIndex | overlay 的 z-index | `1000` |
 | \--nutui-overlay-content-bg-color | 遮罩層嵌套內容背景顏色 | `$gray6` |
 | \--nutui-overlay-content-color | 遮罩層嵌套內容字體顏色 | `$gray1` |

src/packages/overlay/overlay.scss

@@ -5,6 +5,7 @@
   width: 100%;
   height: 100%;
   background: $overlay-bg-color;
+  z-index: $overlay-zIndex;
   .wrapper {
     .content {
       background-color: $overlay-content-bg-color;

src/packages/overlay/overlay.taro.tsx

@@ -67,7 +67,6 @@ export const Overlay: FunctionComponent<
   const classes = classNames(className, classPrefix)
 
   const styles = {
-    zIndex,
     ...style,
   }
 

src/packages/overlay/overlay.tsx

@@ -72,7 +72,6 @@ export const Overlay: FunctionComponent<
   const classes = classNames(className, classPrefix)
 
   const styles = {
-    zIndex,
     ...style,
   }
 

src/styles/variables-jmapp.scss

@@ -811,6 +811,7 @@ $calendar-day-active-border-radius: var(
 
 //overlay（✅）
 $overlay-bg-color: var(--nutui-overlay-bg-color, $gray7) !default;
+$overlay-zIndex: var(--nutui-overlay-zIndex, 1000) !default;
 $overlay-content-bg-color: var(
   --nutui-overlay-content-bg-color,
   $gray6

src/styles/variables.scss

@@ -829,6 +829,7 @@ $calendar-day-active-border-radius: var(
 
 //overlay（✅）
 $overlay-bg-color: var(--nutui-overlay-bg-color, $gray7) !default;
+$overlay-zIndex: var(--nutui-overlay-zIndex, 1000) !default;
 $overlay-content-bg-color: var(
   --nutui-overlay-content-bg-color,
   $gray6