样式 bootstrap-vue 下拉按钮

Question

我的 nuxtjs 应用程序中有这个带有 bootstrap-vue 的下拉菜单：

<div>
  <b-dropdown class="dropdown" id="dropdown-1" text="Dropdown Button" class="m-md-2">
    <b-dropdown-item>First Action</b-dropdown-item>
    <b-dropdown-item>Second Action</b-dropdown-item>
    <b-dropdown-item>Third Action</b-dropdown-item>
    <b-dropdown-divider></b-dropdown-divider>
    <b-dropdown-item active>Active action</b-dropdown-item>
    <b-dropdown-item disabled>Disabled action</b-dropdown-item>
  </b-dropdown>
</div>

我希望能够通过此代码更改下拉按钮的边框和背景颜色：

<style scoped>
  .dropdown {
    border: solid 0px;
    background: white;
  }
</style>

请注意样式必须范围。我做错了什么以及如何更改下拉按钮的样式？

Answer 1

您可以使用 toggle-class 将作用域 CSS class 分配给您的下拉切换按钮，并使用 variant='none' 禁用切换按钮时有效的默认变体点击了。

模板

<b-dropdown toggle-class='customDropdown' variant='none' class="m-md-2" id="dropdown-1" text="Dropdown Button">
  <b-dropdown-item>First Action</b-dropdown-item>
    <b-dropdown-item>Second Action</b-dropdown-item>
    <b-dropdown-item>Third Action</b-dropdown-item>
    <b-dropdown-divider></b-dropdown-divider>
    <b-dropdown-item active>Active action</b-dropdown-item>
    <b-dropdown-item disabled>Disabled action</b-dropdown-item>
</b-dropdown>

CSS

<style scoped>
  .customDropdown {
    border: 3px dashed cyan;
    background-color: purple;
  }
</style>

示例结果：

样式 bootstrap-vue 下拉按钮

styling bootstrap-vue dropdown button

html

javascript

css

vue.js

bootstrap-vue