vue js分页css不符合文档预期

rur96b6h  于 2023-02-24  发布在  Vue.js
关注(0)|答案(3)|浏览(370)

我在vue中实现这个分页器:https://github.com/lokyoung/vuejs-paginate
由于一些奇怪的原因,布局不工作,这是我的分页器看起来像:

我导入并使用了它:

import Paginate from 'vuejs-paginate'
Vue.component('paginate', Paginate);

我在使用组件的html页面中这样做:

<script src="https://unpkg.com/vuejs-paginate@latest"></script>

在我的组件中,我做到了:

<paginate
  :page-count="31"
  :page-range="10"
  :maring-pages="5"
  :click-handler="pageClickCallback"
  :container-class="'pagination'"
/>

一切如文件所述,但没有布局。
这是怎么回事?

dz6r00yl

dz6r00yl1#

看起来,这个软件包根本没有提供CSS,你需要自己设计样式-或者-使用bootstrap.css.查看他们的演示-https://jsfiddle.net/lokyoung/u3u3nzns/,如果你删除boostrap.css(在资源选项卡中)-你会看到,没有应用样式。
您可以看到此处使用的类-https://github.com/lokyoung/vuejs-paginate/blob/master/src/components/Paginate.vue

q8l4jmvw

q8l4jmvw2#

分页的当前实现需要来自 Bootstrap 的类。请在页面上的某个位置从 Bootstrap 导入css
然后编写下面的代码来实现分页

<paginate
    v-model="page"                
    :click-handler="changePage"
    :container-class="'pagination'"   
    :page-count="10"    
    :page-class="'page-item'"
    :next-class="'page-item'"
    :prev-class="'page-item'"
    :page-link-class="'page-link'"
    :prev-link-class="'page-link'"
    :next-link-class="'page-link'">
</paginate>
ccrfmcuu

ccrfmcuu3#

<paginate 
   v-model="page" 
   :page-count="20" 
   :prev-text="'Prev'"
   :next-text="'Next'" 
   :container-class="'pagination'" 
>
</paginate>

.pagination {
  display: inline-block;
  padding-left: 0;
  margin: 20px 0;
  border-radius: 4px;
}
.pagination > li {
  display: inline;
}
.pagination > li > a,
.pagination > li > span {
  position: relative;
  float: left;
  padding: 6px 12px;
  margin-left: -1px;
  line-height: 1.42857143;
  color: #337ab7;
  text-decoration: none;
  background-color: #fff;
  border: 1px solid #ddd;
}
.pagination > li:first-child > a,
.pagination > li:first-child > span {
  margin-left: 0;
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
}
.pagination > li:last-child > a,
.pagination > li:last-child > span {
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
}
.pagination > li > a:hover,
.pagination > li > span:hover,
.pagination > li > a:focus,
.pagination > li > span:focus {
  z-index: 3;
  color: #23527c;
  background-color: #eee;
  border-color: #ddd;
}
.pagination > .active > a,
.pagination > .active > span,
.pagination > .active > a:hover,
.pagination > .active > span:hover,
.pagination > .active > a:focus,
.pagination > .active > span:focus {
  z-index: 2;
  color: #fff;
  cursor: default;
  background-color: #337ab7;
  border-color: #337ab7;
}
.pagination > .disabled > span,
.pagination > .disabled > span:hover,
.pagination > .disabled > span:focus,
.pagination > .disabled > a,
.pagination > .disabled > a:hover,
.pagination > .disabled > a:focus {
  color: #777;
  cursor: not-allowed;
  background-color: #fff;
  border-color: #ddd;
}
.pagination-lg > li > a,
.pagination-lg > li > span {
  padding: 10px 16px;
  font-size: 18px;
  line-height: 1.3333333;
}
.pagination-lg > li:first-child > a,
.pagination-lg > li:first-child > span {
  border-top-left-radius: 6px;
  border-bottom-left-radius: 6px;
}
.pagination-lg > li:last-child > a,
.pagination-lg > li:last-child > span {
  border-top-right-radius: 6px;
  border-bottom-right-radius: 6px;
}
.pagination-sm > li > a,
.pagination-sm > li > span {
  padding: 5px 10px;
  font-size: 12px;
  line-height: 1.5;
}
.pagination-sm > li:first-child > a,
.pagination-sm > li:first-child > span {
  border-top-left-radius: 3px;
  border-bottom-left-radius: 3px;
}
.pagination-sm > li:last-child > a,
.pagination-sm > li:last-child > span {
  border-top-right-radius: 3px;
  border-bottom-right-radius: 3px;
}

相关问题