element el-popover避坑

当前我的需求为点击图片上任意一标点时出现el-popover对改标点进行编辑等操作，所以采用的是manual方式，但是按照原来的代码一直有一个问题就是，明明所绑定的v-model已经为true，但是popover一直不显示。

 <el-popover
      ref="popover"
      placement="right"
      width="120"
      trigger="manual"
      v-model="popoverVisible"
    >
      <div class="operDiv">
        <div class="operDiv_div">
          <el-button class="pilian" type="primary" @click="peekSpace"
            >查看</el-button
          >
        </div>
        <div class="operDiv_div">
          <el-button class="daoru" type="primary" @click="editSpace"
            >编辑</el-button
          >
        </div>
        <div class="operDiv_div">
          <el-button class="shanchu" type="danger" @click="deleteSpace"
            >删除</el-button
          >
        </div>
        <div class="operDiv_div">
          <el-button
            class="pilian"
            type="primary"
            @click="$refs.popover.doClose()"
            >退出</el-button
          >
        </div>
      </div>
      <span
        ref="popoverSpan"
        class="popoverSpan"
        slot="reference"
        @click="popoverVisible = true"
      ></span>
    </el-popover>

 这时我通过html检查发现，初始时外部的span display为none，内部的elpopoever，dispaly也为none。当修改v-model所绑定的值为true时，外部的display：noone消失，内部的还存在才导致了elpopover不显示。最后通过反复的尝试，查看别的资料才找到了解决方法，当修改popovervisible为true后，再调用elpopover中的doShow，doHide方法。

doShow，使其显示，doHide使其隐藏，如果连续使用了这两个方法可以像我一样设置一个1毫秒的定时器，不然可能会没有效果（注意所绑定的ref！！）

  this.map.clickMarker(marker => {
        this.$refs.popoverSpan.click();
        this.$refs.popover.doClose();
        setTimeout(() => {
          this.$refs.popover.doShow();
        }, 100);
      });