如何在引导程序中更改分页颜色？

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

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

希望它很适合您

Answer 2

您可以将一个类添加到b-pagination，并使用该类来定位分页内的a标签。请查看摘要以获取示例。

您还可以使用以下道具（需要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/[email protected]/dist/vue.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/bootstrap-vue.js"></script>

<link href="https://unpkg.com/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://unpkg.com/[email protected]/dist/bootstrap-vue.css" rel="stylesheet"/>


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