
如果是列表循环,每一个元素有都有自己popover,那我们直接用popover循环即可,类似于:
// HTML
<el-popover
v-for="tag in list"
:key="tag.name"
placement="top-start"
title="标题"
width="200"
trigger="hover"
:content="tag.type"
>
<el-tag slot="reference">{{ tag.name }}</el-tag>
</el-popover>
// JS
list: [
{ name: "标签一", type: "normal" },
{ name: "标签二", type: "success" },
{ name: "标签三", type: "info" },
{ name: "标签四", type: "warning" },
{ name: "标签五", type: "danger" },
]
还有一种非列表循环的常见,两个或者多个不同的元素怎么共有一个popover呢,直接上代码
HTML
<el-button id="btn1" v-popover:popover @click="btnClick($event)">手动激活1</el-button>
<el-button id="btn2" v-popover:popover @click="btnClick($event)">手动激活2</el-button>
<el-popover
ref="popover"
placement="bottom"
title="标题"
width="200"
trigger="manual"
content="这是一段内容,这是一段内容,这是一段内容,这是一段内容。"
v-model="visible"
>
</el-popover>
JS
data() {
return {
visible: false,
]
};
},
methods: {
btnClick(e) {
// 核心代码
this.visible = false;
this.$refs.popover.doDestroy(true);
this.$nextTick(() => {
this.$refs.popover.referenceElm = e.target;
this.visible = true;
});
},
}
这个方式适用于popover自定义控制显示,通过v-popover
指令绑定到需要触发popover
的元素,
- 点击后先把
popover
隐藏,通过调用组件内部方法doDestory
把popover
销毁。 - 然后通过
nextTick
把新的元素赋值给popover
的reference
,再把popover显示出来。