使用el-popover时,自定义关闭

el-popover 是ElementUI封装的一个弹窗组件,类似于el-tooltip,弹窗中也可以自定义内容等。

它的打开方式由trigger属性定义,引用官方文档:trigger属性用于设置何时触发 Popover,支持四种触发方式:hover,click,focus 和 manual。
对于触发 Popover 的元素,有两种写法:使用 slot="reference" 的具名插槽,或使用自定义指令v-popover指向 Popover 的索引ref。

el-popover trigger设置为manual,意为手动方式打开或关闭。此时el-popover 需绑定一个布尔值,v-model="visible",来控制它打开关闭,触发 Popover 的元素需要绑定一个事件方法设置布尔值来控制其打开或关闭。(注意:trigger设置为manual时,无法通过点击弹窗外的区域关闭弹窗。click可以通过点击弹窗之外的区域关闭)

此时我的需求是,使用click方式触发,但是关闭时除了点击弹窗之外的区域,也可以点击弹窗内的某个组件关闭。
此时,可以直接在关闭事件方法中使用以下代码,直接调用popover内部的关闭方法。

this.$refs['popoverName'].doClose()

但是,如果一个是在循环的组件中使用el-popover,例如table,或者v-for渲染的组件,此时直接使用上述代码是有问题的。此时可以在循环时动态绑定el-popover的ref名称,关闭时就使用对应的ref去调用事件

<el-popover
  :ref="`popover-${scope.$index}`"
  trigger="click"
</el-popover>