该方案一般用于处理在默认情况下,在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>
好了,完事,各位同学有问题就在评论区留言。