如何设置b-pagination的主色？

Question

在bootstrap-vue分页中没有用于更改分页主色的插槽。

你看只有蓝色。

有什么办法可以把它改成我需要的颜色吗？

Answer 1

您可以通过更改 b-pagination 的活动项目的 CSS 来更改它。我通过以下代码说明了解决方案：

new Vue({
  el: '#app',
  data() {
    return {
      rows: 100,
      perPage: 10,
      currentPage: 1
    }
  },

})

.customPage.page-item.active .page-link {
  background-color: red;
  border-color: red;
}

<link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap@4.5.3/dist/css/bootstrap.min.css" />
<link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap-vue@2.21.2/dist/bootstrap-vue.css" />

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

<div id="app">
  <b-pagination v-model="currentPage" :total-rows="rows" :per-page="perPage" page-class="customPage"></b-pagination>
</div>

Answer 2

我为此使用了深度 css 选择器，只需向组件添加自定义 class 并相应地添加 select 子元素（这适用于 vue2）

::v-deep .customPagination  .page-link {
      background: #1E1E1E ;
      color: white;
      border: #363636 1px solid;
    }
    ::v-deep .customPagination .active button{
      background: #2196f3;
    }

<b-pagination
        v-model="page"
        class="customPagination"         
      >
   </b-pagination>

如何设置b-pagination的主色？

How to set the b-pagination's main color?

javascript

bootstrap-vue