由特定元素触发的元素 UI 弹出框答案

【问题标题】：Element UI popover to be triggered by a specific element由特定元素触发的元素 UI 弹出框
【发布时间】：2022-06-16 11:16:11
【问题描述】：

我有一个 Element UI 弹出框。问题是如何在 el-popover 之外触发其他元素而不是 Delete el-button。我尝试将 slot="reference" 移动到该特定元素，但弹出框没有放置在该元素之外。

<el-popover
  placement="top"
  width="160"
  v-model="visible">
  <p>Are you sure to delete this?</p>
  <div style="text-align: right; margin: 0">
    <el-button size="mini" type="text" @click="visible = false">cancel</el-button>
    <el-button type="primary" size="mini" @click="visible = false">confirm</el-button>
  </div>
  <el-button slot="reference">Delete</el-button>
</el-popover>

【问题讨论】：

标签： popover element-ui

【解决方案1】：

你可以引用 virtual-ref 属性

见：https://element-plus.org/en-US/component/popover.html#virtual-triggering

【讨论】：