控制elementUI的Popover弹出框显示OR隐藏

认识Popover组件

先来个基础版的Popover组件，具体属性可以查看官网

<el-popover
  placement="right"
  width="400"
  trigger="click">
  <span>demo</span>
  <el-button slot="reference">click 激活</el-button>
</el-popover>

这时候的组件，当点击组件外时会自动关闭组件。

项目问题

但有的时候这个特性会变的比较烦人。例如，当我这个组件里嵌套一个选择器，代码如下：

<el-popover
  placement="right"
  width="400"
  trigger="click">
  <section>
    <span>状态：</span>
    <el-select v-model="chooseStatus"
      placeholder="请选择"
    >
      <el-option v-for="item in statusList"
      :key="item.value"
      :label="item.value"
      :value="item.key">
        </el-option>
    </el-select>
  </section>
  <el-button slot="reference">click 激活</el-button>
</el-popover>

这个时候如果我点击下拉选项，就会自动关闭弹出框，因为下拉选项是在弹出框外围的。 但我的产品告诉我，我们需要使用保存按钮(不懂为啥)，所以选完选项不能关闭弹出窗。那就需要改进我们的代码了，仔细研读了下官方文档，发现了trigger和visible两个属性，解了我燃眉之急。

trigger：弹出窗的触发方式，可选值click/focus/hover/manual visible：控制弹出窗是否显示，搭配trigger:manual生效

加上以上两位，我的代码改成如下：

<el-popover placement="bottom"
  trigger="manual"
  :visible="isShowPopover"
  width="400">
  <div class="popoverWrap">
    <section>
     <span>状态：</span>
     <el-select v-model="chooseStatus"
       placeholder="请选择"
     >
       <el-option v-for="item in statusList"
         :key="item.value"
         :label="item.value"
         :value="item.key">
       </el-option>
      </el-select>
     </section>
     <section>
       <el-button type="primary"
         @click="updateStatus();isShowPopover = false">保存</el-button>
       <el-button @click="isShowPopover = false">取消</el-button>
     </section>
    </div>
  <template v-slot:reference>
    <span type="text" class="handleSpan"
      @click="isShowPopover = true">
      状态
	  </span>
  </template>
</el-popover>

正式将控制弹出框显示隐藏的任务交给了两个按钮（控制isShowPopover的值），至此问题成功解决了。