elementui组件`el-popover`如何自定义设置`z-index`属性？

Question

页面上有很多动态生成的el-popover，有可能堆叠，所以我希望能够手动控制z-index属性，例如，如果鼠标移动上去，我将某个el-popover的z-index加1，如此来控制弹框显示，改怎么设置呢 ？

Answer 1

看了文档你可以这样操作：
popper-class 为 popper 添加类名 string — —
popper-style 为 popper 自定义样式

<template>
  <div>
    <div v-for="(item, index) in items" :key="index" @mouseover="handleMouseover(index)">
      <el-popover
        placement="top"
        width="200"
        trigger="hover"
        :popper-class="`popover-${index}`"
        :popper-style="{ zIndex: zIndexes[index] }"
      >
        <p>内容</p>
        <button slot="reference">hover 激活</button>
      </el-popover>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: Array(10).fill(0), // 假设有10个popover
      zIndexes: Array(10).fill(2000), // 初始的z-index
    };
  },
  methods: {
    handleMouseover(index) {
      this.zIndexes = this.zIndexes.map((zIndex, i) => i === index ? zIndex + 1 : zIndex);
    },
  },
};
</script>