关于项目中网页层级的管理

作者：仿生狮子
链接：https://www.zhihu.com/question/24216418/answer/2626777518
来源：知乎
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

多人写业务组件需要设定 zIndex 值时，一般很少会为了覆盖特定元素而写死一个更大的 zIndex 这样做（如果有请在 readme 中说明），更常见的情况是 A 写了一个全局弹窗手写了 zIndex 而 B 发现自己只能写一个比他更大的才不至于被 A 的弹窗遮住。这时候 C 跑来一看，都摆烂是吧，那我的弹窗直接增加一个数量级。如果改 zIndex 只是为了调整基础的页面布局，那么用 10 以内的 zIndex 就完全够了。所以讲到管理 zIndex 的方案应该是说如何管理弹窗、selector 等公共组件的层叠顺序问题。可以参考 element，简单来说，它把弹窗放到了一个类似问题描述中网址提到的“front-view”中。而对于处于“front-view”中的弹窗等组件的层叠顺序，用使用了全局维护的 zIndex 管理器去管理。每次新建弹窗，向管理器索要 zIndex 值并将其加一，这样保证了每一个新创建的弹窗等组件都能用上整个项目中最大的那个 zIndex 值。这样保证了弹窗套弹窗、弹窗套表单、表单又套弹窗等复杂情况下的层叠顺序。要累死累活地手动改 zIndex，还不如把 element-plus 中相关代码拷贝过来用呢。统一管理 zIndex，省心，团队成员会感谢你的。

// https://github.com/element-plus/element-plus/blob/b80e5c69e93145414868a5adade9c49f9fe46659/packages/hooks/use-z-index/index.ts#L11
import { ref, computed } from 'vue'
import { useGlobalConfig } from '../use-global-config'

const zIndex = ref(0)

export const useZIndex = () => {
  const initialZIndex = useGlobalConfig('zIndex', 2000) // TODO: move to @element-plus/constants
  const currentZIndex = computed(() => initialZIndex.value + zIndex.value)

  const nextZIndex = () => {
    zIndex.value++
    return currentZIndex.value
  }

  return {
    initialZIndex,
    currentZIndex,
    nextZIndex,
  }
}

参考：: ⚖️ Element 黑魔法，统一多组件库的层叠顺序