补充：

实际测试发现 useZIndex 似乎是全局共享的，我们的页面上使用了很多 tooltip 之类的悬浮展示/交互的组件，鼠标在页面上晃一晃再打开 drawer 发现 z-index 自增了50多……😭

解决的方案有如下：

1. 给 drawer 设置 z-index prop 让其层级固定
2. 在自己的组件里从 element-plus 中导出 useZIndex 动态的设置 z-index ，让它跟着一起增💦💦💦

补充：

实际测试发现 useZIndex 似乎是全局共享的，我们的页面上使用了很多 tooltip 之类的悬浮展示/交互的组件，鼠标在页面上晃一晃再打开 drawer 发现 z-index 自增了50多……😭

解决的方案有如下：

1. 给 drawer 设置 z-index prop 让其层级固定
2. 在自己的组件里从 element-plus 中导出 useZIndex 动态的设置 z-index ，让它跟着一起增💦💦💦

我目前是这么使用的：

import { useZIndex } from 'element-plus'

export const useComponentZIndex = () => {
  const { nextZIndex } = useZIndex()
  const zIndex = ref(nextZIndex())

  function updateZIndex() {
    zIndex.value = nextZIndex()
  }

  return {
    zIndex,
    updateZIndex,
  }
}

const { zIndex, updateZIndex } = useComponentZIndex()
const dropdownStyle = computed(() => {
  return {
    zIndex: zIndex.value
  }
})

function onSelectTriggered() {
  if(!isOpen.value) {
    updateZIndex()
    isOpen.value = true
  }
}

我觉得这也是一种方法。

其实只要理解了它的原理，规避本身还是很容易的，只是这个对于开发者来说心智有点高，而且在遇到它之前大概率也是不太可能想到的……