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

无法给<b-popover>上课，您可以阅读here。

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

干杯。

Answer 2

版本2.0.0-rc.26（即将发布）增加了对工具提示/弹出窗口变体的支持，以及将自定义类应用于工具提示/弹出窗口根元素。

您可以在https://bootstrap-vue.netlify.com/上查看预览（发布后将在https://bootstrap-vue.js.org/上显示）

如何使用Vue Boostrap将类添加到弹出框？

2 个答案: