首页 前端知识 element-ui-vue2-el-popover-trigger为manual时的显示与隐藏处理-typescript实例

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

2024-06-06 10:06:33 前端知识 前端哥 599 948 我要收藏

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

  • 主要思路先将el-popover的trigger设置为manual,然后在文字的点击事件中加入一些特殊处理:
  1. 调用ref显示popover (this.$refs.basePopover as any).doShow();
  2. 在#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>

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

转载请注明出处或者链接地址:https://www.qianduange.cn//article/11079.html
标签
评论
发布的文章
大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!