elemetUI Popover鼠标悬浮在弹出框上时，弹出框隐藏

具体场景如下图所示：

ui提出鼠标离开icon时弹框要隐藏，不然用户不能看下边的内容，想了想感觉也很合理。

然后去elemetUI官网看了一下，好像没有这种场景，鼠标悬浮到弹框上都是显示的。但又不是很想写。

原代码：

<template>
  <div>
    <div v-for="(item, index) in list" :key="index" class="item">
      <div>{{ item.name }}</div>
      <i class="el-icon-delete-solid"></i>
      <el-popover width="200" trigger="hover" :close-delay="0">
        <div>{{ item.content }}</div>
        <i class="el-icon-info" slot="reference"></i>
      </el-popover>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: [
        { name: 1, content: 11111 },
        { name: 2, content: 2222222 },
      ],
    };
  },
};
</script>

把popover的触发模式改成了手动，绑定数据，通过icon的mouse事件控制弹框的显示和隐藏，实现了要求的交互。

修改后：

<template>
  <div>
    <div v-for="(item, index) in list" :key="index" class="item">
      <div>{{ item.name }}</div>
      <i class="el-icon-delete-solid"></i>
      <el-popover
        width="200"
        trigger="manual"
        :close-delay="0"
        v-model="item.isShow"
      >
        <div>{{ item.content }}</div>
        <i
          class="el-icon-info"
          slot="reference"
          @mouseover="changeStatus(item, true)"
          @mouseleave="changeStatus(item, false)"
        ></i>
      </el-popover>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: [
        { name: 1, content: 11111, isShow: false },
        { name: 2, content: 2222222, isShow: false },
      ],
    };
  },
  methods: {
    changeStatus(item, status) {
      this.$set(item, "isShow", status);
    },
  },
};
</script>