element UI 多个元素共有一个popover 实现方法

如果是列表循环，每一个元素有都有自己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的元素，

1. 点击后先把popover隐藏，通过调用组件内部方法doDestory把popover销毁。
2. 然后通过nextTick把新的元素赋值给popover的reference，再把popover显示出来。