el-popover的使用技巧.html

<!--
场景：有一个纯js实现的第三方组件A，我需要在在这个组件中的某个dom位置注入一个elment-ui的popover组件。
但是，这个组件A没有提供一个方式可以直接注入vue组件。它值提供了通过字符串配置方式是注入原生的html标签。
因此，就使用el-popover组件的虚拟触发的方式
-->
<ExpandMultiLevelPopover
    virtual-triggering
    :virtual-ref="expandMultiLevelPopoverRef"
    :[expandMultiLevelPopoverVisible]="true"
    @popoverHide="expandMultiLevelPopoverRef = null"
/>
<!--
el-popover组件默认的trigger方式是hover
由于需要hover到dom元素去提供动态的expandMultiLevelPopoverRef
这个时候，不会马上popover不会马上显示
为了解决这个问题，就使用动态的属性，配置visible: true
visible为true表示popover是手动触发的了
下一帧又见此属性设置成null
这样popover组件又是通过hover的方式触发了
-->

<script type="text/javascript">
window.hoverExpandMultiLevel = async (e) => {
    const $target = e.target
    this.expandMultiLevelPopoverRef = $target
    await this.$nextTick()
    this.expandMultiLevelPopoverVisible = 'visible'
    await this.$nextTick()
    this.expandMultiLevelPopoverVisible = null
}
</script>