vue.jselement-ui

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


I am using Element Popover component (https://element.eleme.io/#/en-US/component/popover) with Vue.js. The popover is working and I am able to display text content.

<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>

Is it possible to show regular html elements, e.g. <br>, <strong> or <img> in the popover content?


Solution

  • As mentioned in attributes description of popover component - content be passed through content prop as string or as a default slot.

    So any content will be passed as a default slot, if no slot name is specified. Here is an example for your case:

    <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>
    

    Note that content prop will be replaced with content of default slot if it is passed. Can't use them both at the same time.