el-popover 通过js手动控制弹出框显示、隐藏

el-popover 通过js手动控制弹出框显示、隐藏

说明

element ui 2.x中，el-popover的显示隐藏有4种触发方式：click/focus/hover/manual，分别是点击/聚焦/悬浮/手动，正常情况这几个触发方式已经能满足大部分需求，但有些业务场景需要通过代码自动触发弹框展示

例如：在后台请求响应返回后，自动打开弹框展示内容，这时我们如果使用的click（click已验证，focus/hover未验证）触发方式，则无法通过js显示弹框

如果使用manual触发方式，主动添加点击事件，可以通过js显示弹框，但无法实现点击空白处关闭弹框，但此方案已基本接近最终需求，针对点击空白处关闭提供全局点击事件处理即可，具体示例如下：

代码示例

<el-popover
  ref="myPopover"
  :value="showPopover"
  placement="bottom"
  width="550"
  trigger="manual"
  :open-delay="500"
  @show="openPopover"
  @hide="closePopover"
>
  <el-table>....弹框展示内容...el-table>
  <el-tooltip slot="reference" content="弹框展示" effect="dark" placement="bottom">
  	
    <span class="hover-effect" @click="trigger">
      <svg-icon icon-class="popover1" />
    span>
  el-tooltip>
el-popover>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

data() {
  return {
    showPopover: false
  }
},
methods: {
  trigger() {
   //点击控制弹框展示/关闭
   this.showPopover= !this.showPopover
  },
  openPopover() {
    //弹框展示时注册全局点击事件
    document.addEventListener('click', this.hidePopover, false)
  },
  closePopover() {
    //弹框关闭时移除全局点击事件
    document.removeEventListener('click', this.hidePopover, false)
  },
  hidePopover(e) {
    // 全局点击事件，检测当前点击位置不包含弹框的元素，则隐藏弹框
    if (!this.$refs.myPopover.$el.contains(e.target)) {
      this.showPopover= false
    }
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25