如何使用 vue bootstrap 将 class 添加到弹出窗口？

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>

我想将 class 添加到 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>

好像对实际的popover没有影响

Answer 1

不能给class给<b-popover>，可以读here.

但正如我在评论中提到的，您可以使用 querySelector 并提供 class 或样式。

干杯。

Answer 2

版本 2.0.0-rc.26（即将发布）增加了对 tooltip/popover 变体的支持，并将自定义类应用于 tooltip/popover 根元素。

发布后您可以在 https://bootstrap-vue.netlify.com/ (and will appear at https://bootstrap-vue.js.org/ 看到预览）

如何使用 vue bootstrap 将 class 添加到弹出窗口？

How can I add a class to a popover with vue boostrap?

vue.js

bootstrap-4

bootstrap-vue