如何在 bootstrap-vue 中更改分页颜色？

Question

我尝试使用引导示例对其进行更改，但失败了。

        <b-pagination
            v-model="currentPage"
            :total-rows="users.length"
            :per-page="perPage"
            align="fill"
            size='lg'
            first-number
            last-number
            class="my-0"
        ></b-pagination>

Answer 1

SCSS

正如 Troy 在评论中指出的那样，bootstrap 有各种 SCSS 变量，您可以使用它们来自定义分页。因此，如果您使用 SCSS，这将是首选方式。

View the variables.

CSS

您可以向b-pagination 添加一个类，并使用该类来定位分页内的a 标记。检查 sn-p 以获取此示例。

您还可以使用以下道具（需要v2.3.0+）在各种类型的按钮上放置特定的类。 请注意，这些会将类放在li 上，因此您仍然需要CSS 来定位a 标记。 有关类道具的更多信息，请查看reference section

page-class
first-class
last-class
prev-class
next-class
ellipsis-class

如果您在组件中使用scoped 样式标签，请注意您可能必须使用deep selector 来正确定位a 标签。

new Vue({
  el: '#app'
})

.customPagination > li > a {
  color: red;
}

.customPagination > li.active > a,
.customPagination > li > a:hover
{
  color: white;
  background-color: green!important;
}

<script src="https://unpkg.com/vue@2.6.11/dist/vue.min.js"></script>
<script src="https://unpkg.com/bootstrap-vue@2.4.1/dist/bootstrap-vue.js"></script>

<link href="https://unpkg.com/bootstrap@4.4.1/dist/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://unpkg.com/bootstrap-vue@2.4.1/dist/bootstrap-vue.css" rel="stylesheet"/>


<div id="app">
  <b-pagination
    :total-rows="50"
    :per-page="5"
    class="customPagination"
  >
  </b-pagination>
</div>

Answer 2

Bootstrap-vue 在更改默认主题颜色时确实不是那么灵活，但这是可能的。

您首先必须创建一个custom.scss 文件，您可以在其中将新的颜色主题添加到您的 bootstrap-vue。

在src/assets/styles/custom.scss:

// Override / set color variables
$myCustom: rgba(64, 206, 148, 1);
$primary: $myCustom;

请注意，在上面的示例中，所有引导元素 - 包括分页 - 没有变体集，都将获得 $myCustom 颜色。

然后你必须在你的根 vue 组件上导入这个文件和原始的 scss 引导文件：

<style lang="scss">
 @import "./assets/styles/custom.scss";
 @import "../node_modules/bootstrap/scss/bootstrap.scss";
</style>

在您的代码示例中，您相应地传递变体：

<b-pagination
    v-model="currentPage"
    :total-rows="users.length"
    :per-page="perPage"
    align="fill"
    size='lg'
    first-number
    last-number
    class="my-0"
    variant="primary"
></b-pagination>

如果你不想修改默认的原色，你可以在你身上创建一个新的变体custom.scss：

$theme-colors: ( "newVariant": rgba(0, 152, 152, 1));

希望它适合你