如何在 Vue.js 的元素 Popover 组件中使用 HTML 标签？

Question

我在 Vue.js 中使用 Element Popover 组件 (https://element.eleme.io/#/en-US/component/popover)。弹出框正在工作，我可以显示文本内容。

<el-popover
    placement="bottom"
    title="Title"
    width="200"
    trigger="click"
    content="this is content, this is content, this is content"
    >
    <el-button type="primary" slot="reference" circle style="background-color:white;border-color:white" >
    <img src="img/if_Help_1493288.png" alt="Help" height="42" width="42">
    </el-button>
 </el-popover>

是否可以显示常规的 html 元素，例如<br>, <strong> or <img> 在弹出内容中？

Answer 1

正如attributes popover 组件的描述中提到的 - 内容通过content prop 作为字符串或默认slot 传递。

因此，如果未指定插槽名称，则任何内容都将作为 default 插槽传递。这是您的案例的示例：

<el-popover
  placement="bottom"
  title="Title"
  width="200"
  trigger="click"
>
  <el-button type="primary" slot="reference" circle style="background-color:white;border-color:white" >
    <img src="img/if_Help_1493288.png" alt="Help" height="42" width="42">
  </el-button>
  <div>
    this is content, <br> <strong>this is content</strong>, <br> this is content
  </div>
</el-popover>

注意content prop 如果通过的话，会被默认槽的内容替换。不能同时使用它们。