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

Question

我将 Element Popover 组件 (https://element.eleme.io/#/en-US/component/popover) 与 Vue.js 一起使用。弹出窗口正在运行，我能够显示文本内容。

<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 description of popover component - content be passed through content prop as string or as a default 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>

注意contentprop如果通过的话会被default slot的内容替换。不能同时使用。

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

How to use HTML tags in element Popover component for Vue.js?

vue.js

element-io