feat(popup): support zIndex (#1721)

varletjs · Jul 24, 2024 · 82e4b71 · 82e4b71
1 parent bdc53ea
commit 82e4b71
Show file tree

Hide file tree

Showing 6 changed files with 24 additions and 4 deletions.
diff --git a/packages/varlet-ui/src/popup/Popup.tsx b/packages/varlet-ui/src/popup/Popup.tsx
@@ -20,7 +20,8 @@ export default defineComponent({
   setup(props, { slots, attrs }) {
     const rendered = useInitialized(() => props.show, true)
     const { zIndex } = useZIndex(() => props.show, 3)
-    const { onStackTop } = useStack(() => props.show, zIndex)
+    const normalizedZIndex = computed(() => props.zIndex ?? zIndex.value)
+    const { onStackTop } = useStack(() => props.show, normalizedZIndex)
     const { disabled } = useTeleport()
     const { bindPopupItems } = usePopupItems()
 
@@ -62,7 +63,7 @@ export default defineComponent({
         <div
           class={classes(n('overlay'), overlayClass)}
           style={{
-            zIndex: zIndex.value - 1,
+            zIndex: normalizedZIndex.value - 1,
             ...overlayStyle,
           }}
           onClick={hidePopup}
@@ -81,7 +82,7 @@ export default defineComponent({
             [props.safeArea, n('--safe-area')],
             [props.safeAreaTop, n('--safe-area-top')]
           )}
-          style={{ zIndex: zIndex.value }}
+          style={{ zIndex: normalizedZIndex.value }}
           role="dialog"
           aria-modal="true"
           {...attrs}
@@ -97,7 +98,7 @@ export default defineComponent({
         <Transition name={n('$-fade')} onAfterEnter={props.onOpened} onAfterLeave={props.onClosed}>
           <div
             class={classes(n('$--box'), n(), [!props.overlay, n('--pointer-events-none')])}
-            style={{ zIndex: zIndex.value - 2 }}
+            style={{ zIndex: normalizedZIndex.value - 2 }}
             v-show={props.show}
           >
             {props.overlay && renderOverlay()}

diff --git a/packages/varlet-ui/src/popup/__tests__/index.spec.js b/packages/varlet-ui/src/popup/__tests__/index.spec.js
@@ -60,6 +60,21 @@ test('test popup onOpen & onClose', async () => {
   wrapper.unmount()
 })
 
+test('test popup zIndex', async () => {
+  const wrapper = mount(Wrapper, {
+    props: {
+      zIndex: 40,
+    },
+  })
+
+  await wrapper.setData({ show: true })
+  expect(wrapper.find('.var-popup').attributes('style')).toContain('z-index: 38')
+  expect(wrapper.find('.var-popup__overlay').attributes('style')).toContain('z-index: 39')
+  expect(wrapper.find('.var-popup__content').attributes('style')).toContain('z-index: 40')
+
+  wrapper.unmount()
+})
+
 test('test popup close on clickOverlay', async () => {
   const onClose = vi.fn()
   const onClickOverlay = vi.fn()

diff --git a/packages/varlet-ui/src/popup/docs/en-US.md b/packages/varlet-ui/src/popup/docs/en-US.md
@@ -204,6 +204,7 @@ const event = ref(false)
 | `teleport` | The location of the Popup to mount                                                                            | _TeleportProps['to'] \| false_ | `body` |
 | `safe-area`              | Whether to enable bottom safety zone adaptation	                                                              | _boolean_             | `false`  |
 | `safe-area-top`          | Whether to enable top safety zone adaptation	                                                                 | _boolean_             | `false`  |
+| `z-index`  ***3.3.10***   | 	 The zIndex of element       | _number_             | `-`  |
 
 ### Events
 

diff --git a/packages/varlet-ui/src/popup/docs/zh-CN.md b/packages/varlet-ui/src/popup/docs/zh-CN.md
@@ -206,6 +206,7 @@ const event = ref(false)
 | `teleport`               | 弹出层挂载的位置                                         | _TeleportProps['to'] \| false_ | `body`      |
 | `safe-area`              | 是否开启底部安全区适配	                                     | _boolean_             | `false`  |
 | `safe-area-top`          | 是否开启顶部安全区适配	                                     | _boolean_             | `false`  |
+| `z-index`  ***3.3.10***         | 	 元素 z-index            | _number_             | `-`  |
 
 ### 事件
 

diff --git a/packages/varlet-ui/src/popup/props.ts b/packages/varlet-ui/src/popup/props.ts
@@ -32,6 +32,7 @@ export const props = {
     type: Boolean,
     default: true,
   },
+  zIndex: Number,
   safeArea: Boolean,
   safeAreaTop: Boolean,
   teleport: {

diff --git a/packages/varlet-ui/types/popup.d.ts b/packages/varlet-ui/types/popup.d.ts
@@ -17,6 +17,7 @@ export interface PopupProps extends BasicAttributes {
   defaultStyle?: boolean
   safeArea?: boolean
   safeAreaTop?: boolean
+  zIndex?: number
   teleport?: TeleportProps['to'] | false
   onOpen?: ListenerProp<() => void>
   onOpened?: ListenerProp<() => void>