vue.js - 如何使用 vue bootstrap 将类添加到弹出窗口？

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