element-ui-vue2-el-popover-trigger为manual时的显示与隐藏处理-typescript实例

本文链接：https://blog.youkuaiyun.com/Backli/article/details/131304971

本文介绍了如何在Vue2应用中使用typescript处理element-ui的Popover，通过将trigger设为manual，避免点击导致外部Popover消失的问题。核心是通过绑定一次性点击事件来控制popover的显示与隐藏。

该方案一般用于处理在默认情况下，在Popover中单击再打开新的popover元素时会导致外部的popover元素消失，所以简单粗暴的用下面方式进行处理了一下。

主要思路先将el-popover的trigger设置为manual，然后在文字的点击事件中加入一些特殊处理：

调用ref显示popover (this.$refs.basePopover as any).doShow();
在#app上绑定点击事件，该事件用于隐藏已弹出的外层popover，该事件为一次性事件，每次点击就绑定，点击完以后就解绑掉，防止浪费资源。

代码示例：

以下代码示例为vue2+typescript+element-ui为基础，具体核心方法是 onPopoverClick，理解就行。

<template>
<el-popover ref="basePopover" v-model="isShowPopover" :placement="placement" :trigger="trigger">
    <div class="container" slot="reference"><span @click="onPopoverClick" :style="{ 'color': labelColor }">{{ label }}<i class="el-icon-arrow-down icon"></i></span></div>
    <slot>Nothing</slot>
</el-popover>
</template>

<script lang="ts">
import Vue from 'vue';
import { Component, Prop } from 'vue-property-decorator';

@Component({})
export default class BasePopover extends Vue {
    /**位置 */
    @Prop() placement!: string;
    /**触发方式 */
    @Prop() trigger!: string;
    /**显示label */
    @Prop({ default: '内容' }) label!: string;
    /**label颜色 */
    @Prop() labelColor!: string;

    /**是否显示窗体 */
    public isShowPopover = false;

    private onPopoverClick(e: any) {
      if (this.trigger == 'manual') {
      	e && e.stopPropagation ? e.stopPropagation() : '';
        let app: any = document.getElementById("app");
        let once = (type: any, callback: any) => {
          let handle = () => {
            callback = callback.call(this)
            app.removeEventListener(type, handle)
          }
          app.addEventListener(type, handle)
        }
        (this.$refs.basePopover as any).doShow();
        once('click', (e: any) => {
          (this.$refs.basePopover as any).doClose();
        });
      }
    }
}
</script>

调用示例：

<BasePopover trigger="manual" label="点我打开"></BasePopover>

好了，完事，各位同学有问题就在评论区留言。