diff --git a/.eslintrc.js b/.eslintrc.js
index e2d7b612c..31664d113 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -148,7 +148,7 @@ module.exports = {
'vue/max-attributes-per-line': 'off',
'vue/multi-word-component-names': 'off',
'vue/v-on-event-hyphenation': 'off',
- 'vue/require-default-prop': 'error',
+ 'vue/require-default-prop': 'off',
'vue/require-explicit-emits': 'error',
'jsdoc/newline-after-description': 1,
diff --git a/packages/components/_private/overlay/src/Overlay.tsx b/packages/components/_private/overlay/src/Overlay.tsx
index d3e293752..e5fcc853d 100644
--- a/packages/components/_private/overlay/src/Overlay.tsx
+++ b/packages/components/_private/overlay/src/Overlay.tsx
@@ -5,9 +5,6 @@
* found in the LICENSE file at https://github.com/IDuxFE/idux/blob/main/LICENSE
*/
-import type { OverlayProps } from './types'
-import type { PopperElement, PopperEvents, PopperOptions } from '@idux/cdk/popper'
-
import {
type ComputedRef,
type Ref,
@@ -26,13 +23,13 @@ import {
} from 'vue'
import { vClickOutside } from '@idux/cdk/click-outside'
-import { usePopper } from '@idux/cdk/popper'
+import { type PopperElement, type PopperEvents, type PopperOptions, usePopper } from '@idux/cdk/popper'
import { CdkPortal } from '@idux/cdk/portal'
import { Logger, callEmit, convertElement, getFirstValidNode } from '@idux/cdk/utils'
import { useGlobalConfig } from '@idux/components/config'
import { useZIndex } from '@idux/components/utils'
-import { overlayProps } from './types'
+import { type OverlayProps, overlayProps } from './types'
export default defineComponent({
name: 'ɵOverlay',
@@ -60,7 +57,7 @@ export default defineComponent({
} = usePopper({ ...popperOptions.value, visible: props.visible })
const { destroy: popperDestroy } = usePopperInit(props, initialize, destroy)
- const { currentZIndex } = useZIndex(toRef(props, 'zIndex'), toRef(common, 'overlayZIndex'), visibility)
+ const currentZIndex = useZIndex(toRef(props, 'zIndex'), toRef(common, 'overlayZIndex'), visibility)
const mergedContainer = computed(() => {
return () => props.container(convertElement(triggerRef)!)
})
@@ -225,7 +222,7 @@ function renderContent(
const prefixCls = mergedPrefixCls.value
const { triggerId } = props
const overlayId = triggerId != null ? `overlay-${triggerId}` : undefined
- const style = currentZIndex.value ? `z-index: ${currentZIndex.value}` : undefined
+ const style = `z-index: ${currentZIndex.value}`
const overlay = (
{contentNode}
diff --git a/packages/components/config/src/types.ts b/packages/components/config/src/types.ts
index c659163b5..893b4e101 100644
--- a/packages/components/config/src/types.ts
+++ b/packages/components/config/src/types.ts
@@ -110,7 +110,7 @@ export type GlobalConfigKey = keyof GlobalConfig
export interface CommonConfig {
prefixCls: string
overlayContainer?: OverlayContainerType
- overlayZIndex: number
+ overlayZIndex: number | (() => number)
theme: 'default' | 'seer'
}
diff --git a/packages/components/drawer/src/Drawer.tsx b/packages/components/drawer/src/Drawer.tsx
index a96d699a2..623e131e3 100644
--- a/packages/components/drawer/src/Drawer.tsx
+++ b/packages/components/drawer/src/Drawer.tsx
@@ -44,7 +44,7 @@ export default defineComponent({
const mask = computed(() => props.mask ?? config.mask)
const { visible, setVisible, animatedVisible, mergedVisible } = useVisible(props)
- const { currentZIndex } = useZIndex(toRef(props, 'zIndex'), toRef(common, 'overlayZIndex'), visible)
+ const currentZIndex = useZIndex(toRef(props, 'zIndex'), toRef(common, 'overlayZIndex'), visible)
const { open, close } = useTrigger(props, setVisible)
const { level, levelAction, push, pull } = useLevel(visible)
diff --git a/packages/components/image/src/ImageViewer.tsx b/packages/components/image/src/ImageViewer.tsx
index 91b24494f..cfcd21401 100644
--- a/packages/components/image/src/ImageViewer.tsx
+++ b/packages/components/image/src/ImageViewer.tsx
@@ -32,7 +32,7 @@ export default defineComponent({
const mergedPortalTarget = usePortalTarget(props, config, common, mergedPrefixCls)
const [visible, setVisible] = useControlledProp(props, 'visible', false)
- const { currentZIndex } = useZIndex(toRef(props, 'zIndex'), toRef(common, 'overlayZIndex'), visible)
+ const currentZIndex = useZIndex(toRef(props, 'zIndex'), toRef(common, 'overlayZIndex'), visible)
const zoom = computed(() => props.zoom ?? config.zoom)
const loop = computed(() => props.loop ?? config.loop)
diff --git a/packages/components/modal/src/Modal.tsx b/packages/components/modal/src/Modal.tsx
index 0a1bef9ad..c5aefb7e7 100644
--- a/packages/components/modal/src/Modal.tsx
+++ b/packages/components/modal/src/Modal.tsx
@@ -42,7 +42,7 @@ export default defineComponent({
const mask = computed(() => props.mask ?? config.mask)
const { visible, setVisible, animatedVisible, mergedVisible } = useVisible(props)
- const { currentZIndex } = useZIndex(toRef(props, 'zIndex'), toRef(common, 'overlayZIndex'), visible)
+ const currentZIndex = useZIndex(toRef(props, 'zIndex'), toRef(common, 'overlayZIndex'), visible)
const { cancelLoading, okLoading, open, close, cancel, ok } = useTrigger(props, setVisible)
diff --git a/packages/components/tooltip/src/useTooltipOverlay.ts b/packages/components/tooltip/src/useTooltipOverlay.ts
index 1dc2cf150..cc3ba79b5 100644
--- a/packages/components/tooltip/src/useTooltipOverlay.ts
+++ b/packages/components/tooltip/src/useTooltipOverlay.ts
@@ -34,7 +34,7 @@ export function useTooltipOverlay(
const mergedOverlayContainer = useOverlayContainer(props, config, common, mergedPrefixCls)
const [visible, setVisible] = useControlledProp(props, 'visible', false)
- const { currentZIndex } = useZIndex(toRef(props, 'zIndex'), toRef(common, 'overlayZIndex'), visible)
+ const currentZIndex = useZIndex(toRef(props, 'zIndex'), toRef(common, 'overlayZIndex'), visible)
onDeactivated(() => {
if (visible.value && props.closeOnDeactivated) {
diff --git a/packages/components/utils/__test__/zIndex.spec.ts b/packages/components/utils/__test__/zIndex.spec.ts
index 73d3008ac..010a13b0f 100644
--- a/packages/components/utils/__test__/zIndex.spec.ts
+++ b/packages/components/utils/__test__/zIndex.spec.ts
@@ -11,7 +11,7 @@ describe('zIndex.ts', () => {
},
setup(props) {
const visible = toRef(props, 'visible')
- const { currentZIndex } = useZIndex(toRef(props, 'zIndex'), ref(3000), visible)
+ const currentZIndex = useZIndex(toRef(props, 'zIndex'), ref(3000), visible)
const style = computed(() => ({ zIndex: currentZIndex.value }))
return {
diff --git a/packages/components/utils/src/zIndex.ts b/packages/components/utils/src/zIndex.ts
index 2e2c12c42..94623d610 100644
--- a/packages/components/utils/src/zIndex.ts
+++ b/packages/components/utils/src/zIndex.ts
@@ -7,37 +7,36 @@
import { type ComputedRef, type Ref, computed, ref, watch } from 'vue'
-import { isNil } from 'lodash-es'
+import { isFunction } from 'lodash-es'
-const zIndexCount = ref(0)
+let zIndexCount = 0
type UseZIndex = (
controlZIndex: Ref,
- commonZIndex: Ref,
+ configZIndex: Ref number)>,
visible: Ref,
-) => {
- currentZIndex: ComputedRef
- nextZIndex: () => number
-}
-export const useZIndex: UseZIndex = (controlZIndex, commonZIndex, visible) => {
- const innerZIndex = ref(commonZIndex.value + zIndexCount.value)
- const currentZIndex = computed(() => controlZIndex.value ?? innerZIndex.value)
- const nextZIndex = () => {
- if (isNil(controlZIndex.value)) {
- innerZIndex.value = commonZIndex.value + zIndexCount.value
- zIndexCount.value++
+) => ComputedRef
+
+export const useZIndex: UseZIndex = (controlZIndex, configZIndex, visible) => {
+ const getZIndex = () => {
+ const zIndex = configZIndex.value
+ if (isFunction(zIndex)) {
+ return zIndex()
}
- return currentZIndex.value
+ return zIndex + zIndexCount++
}
+ const innerZIndex = ref(0)
+
watch(
visible,
newVisible => {
if (newVisible) {
- nextZIndex()
+ innerZIndex.value = getZIndex()
}
},
{ immediate: true },
)
- return { currentZIndex, nextZIndex }
+
+ return computed(() => controlZIndex.value ?? innerZIndex.value)
}
diff --git a/packages/pro/search/src/ProSearch.tsx b/packages/pro/search/src/ProSearch.tsx
index 1f16ec586..48ab8265d 100644
--- a/packages/pro/search/src/ProSearch.tsx
+++ b/packages/pro/search/src/ProSearch.tsx
@@ -63,7 +63,9 @@ export default defineComponent({
searchStateContext,
activeSegmentContext,
)
- const { currentZIndex } = useZIndex(toRef(props, 'zIndex'), toRef(componentCommon, 'overlayZIndex'), ref(true))
+
+ //TODO: fix ref(true)
+ const currentZIndex = useZIndex(toRef(props, 'zIndex'), toRef(componentCommon, 'overlayZIndex'), ref(true))
const { initSearchStates, clearSearchState } = searchStateContext
const { activeSegment } = activeSegmentContext
diff --git a/packages/site/src/docs/Faq.zh.md b/packages/site/src/docs/Faq.zh.md
index 7cb560f5a..252b62102 100644
--- a/packages/site/src/docs/Faq.zh.md
+++ b/packages/site/src/docs/Faq.zh.md
@@ -32,6 +32,18 @@ order: 10
例如你可以设置 `` 在 Popover 中渲染下拉框组件。
你也可以通过在全局配置中设置来进行全局覆盖,例如:`useGlobalConfig('common', { overlayContainer: element => element?.parentElement })`,需要特别注意的是,这里的 `element` 可能为空,因为该配置对于 `Modal, Drawer` 等组件同样生效,此类组件不存在 `trigger` 元素。
+## 如何自定义控制浮层的 `z-index`? 通常在与其他组件库混用,或者使用了微前端框架的情况下需要。
+
+首先我们大多数浮层组件都提供了 `zIndex` 的配置(如果没有,可以给我们提供 issue 或者直接 PR),你可以精确的控制它们。
+如果你觉得控制每一个组件的 `zIndex` 比较麻烦,我们也提供了全局配置以便于你进行全局统一管理,例如:
+
+```ts
+const initZIndex = 1000
+const indexCount = 0
+const customGetZIndex = () => initZIndex + indexCount++
+useGlobalConfig('common', { overlayZIndex: customGetZIndex })
+```
+
## 图标不显示?如何更新图标?
请务必花几分钟时间仔细阅读[快速上手](/docs/getting-started/zh) 和 [图标的动态加载与静态加载](/components/icon/zh?tab=api#FAQ) 进行一些必要的配置。