Как использовать HTML-теги в элементе Popover для компонента Vue.js? - PullRequest
Новая
       10

Как использовать HTML-теги в элементе Popover для компонента Vue.js?

0 голосов
/ 13 ноября 2018

Я использую компонент 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> в поповере?

1 Ответ

0 голосов
/ 14 ноября 2018

Как указано в атрибуты описание компонента 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 будет заменен содержимым слота по умолчанию, если он будет пройден. Не могу использовать их обоих одновременно.

...