其实是一个很简单的问题，但不知道为什么网上没人写

最近写项目的时候遇到了一个问题，el-popover 想要效果和el-dialog类似，即背后有一个蒙层，可以通过点击蒙层来关闭popover(因为在popover上又有一了个popover，需要点击外面先关闭第二个popover再关闭第一个popover，因为popover监听的是点击事件来关闭，所以需要通过蒙层的方式说动关闭)。

一开始的时候想要直接通过修改z-index来实现，但这样会存在

  1. 当会话过期时，dialog会遮住退出提示
  2. message会在dialog-mask下面,交互不太好
  3. 当你在dialog中使用el-select等组件的时候，显示内容在下面
  4. 代码稳定性不高，虽然10000基本不会遇到

因此我们需要这个对话框的z-index也能够动态添加

解决这个问题首先要知道element/antd等框架的z-index逻辑，

组件库内部维护了一个z-index值，如Element默认为2000，每次element的对话框弹出的时候，都会获得该z-index并增加，所以，我们需要找到element的这个接口并调用该接口

(不知道为什么，网上找了好久，要么是vue2的解决方案，要么就是文不对题，也可能本身这个需求也比较偏)

<div class="drop-down-mask" :style="{'zIndex':zIndex.nextZIndex()}"></div>
<script setup>
import { useZIndex } from 'element-plus'
const zIndex = useZIndex()
console.log(zIndex.nextZIndex()) //默认2001
console.log(zIndex.nextZIndex()) //默认2002
</script>

Q.E.D.