我在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'"
/>
一切如文件所述,但没有布局。
这是怎么回事?
3条答案
按热度按时间dz6r00yl1#
看起来,这个软件包根本没有提供CSS,你需要自己设计样式-或者-使用
bootstrap.css
.查看他们的演示-https://jsfiddle.net/lokyoung/u3u3nzns/,如果你删除boostrap.css(在资源选项卡中)-你会看到,没有应用样式。您可以看到此处使用的类-https://github.com/lokyoung/vuejs-paginate/blob/master/src/components/Paginate.vue
q8l4jmvw2#
分页的当前实现需要来自 Bootstrap 的类。请在页面上的某个位置从 Bootstrap 导入css
然后编写下面的代码来实现分页
ccrfmcuu3#