Как я могу добавить класс к поповеру с помощью vue boostrap?

Question

у меня есть:

    <li class="nav-item">
      <b-popover
        target="search-button"
        placement="topleft"
        title="Search"
        triggers="click"
        content="Placement"
        container="nav-container"
      >
        <template slot="title">Interactive Content</template>
        <template slot="content">Interactive Content</template>
      </b-popover>
      <a class="nav-link" href="#" title="Popover Title" id="search-button">
        <i class="material-icons md-48">search</i>
      </a>
    </li>

Я хочу добавить класс к popover, но в идеале он должен быть ограничен этим компонентом. Когда я пытаюсь сделать:

<style scoped>
.nav {
  background: white;
  border-top: 0.1px solid silver;
}

.nav-pills .nav-link {
  border-radius: 0;
}

.popover {
  width: 100%;
  background: red;
}
</style>

Кажется, это не влияет на фактический поповер.

Answer 1

Версия 2.0.0-rc.26 (которая будет выпущена в ближайшее время) добавляет поддержку вариантов всплывающей подсказки / всплывающего окна, а также применения пользовательских классов к корневому элементу всплывающей подсказки / всплывающего окна.

Вы можете увидетьпредварительный просмотр на https://bootstrap -vue.netlify.com / (и появится на https://bootstrap -vue.js.org / после освобождения)

Answer 2

Невозможно дать класс <b-popover>, вы можете прочитать здесь .

Но, как я уже упоминал в комментарии, вы можете использовать querySelector и давать класс или стиль.

Приветствия.