1.安装依赖库(需要用到bootstrap的css样式)及分页插件(vuejs-paginate)
npm install bootstrap@3.3.0 -–save-dev
npm install vuejs-paginate --save
2.封装此分页插件,根据自己需要的功能封装,调用起来会更简洁
<template>
<div class="paginate_container">
<paginate
:page-count="pageCount"
:margin-pages="marginPages"
:page-range="rangePage"
:initial-page="initPage"
:click-handler="pageEvent"
prev-text="上一页"
next-text="下一页"
:container-class="'pagination'"
:page-class="'page-item'"
:page-link-class="'page-link-item'"
:prev-class="'prev-item'"
:prev-link-class="'prev-link-item'"
:next-class="'next-item'"
:next-link-class="'next-link-item'"
></paginate>
</div>
</template>
<script>
import 'bootstrap/dist/css/bootstrap.min.css'
import paginate from "vuejs-paginate"
export default {
props:{
pageCount:Number,
marginPages:Number,
rangePage:Number,
initPage:Number,
},
components: { paginate },
},
methods: {
pageEvent: function(e) {
console.log(e);
this.$emit("pageEvent", e); //将值放在自定义的事件函数中作为参数
}
}
};
</script>
<style scoped>
.paginate_container {
/* widows: 100%;
height: 20px; */
/* display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: center;
align-items: center; */
}
.page-item {
}
.page-link-item {
}
.prev-item {
}
.prev-link-item {
}
.next-item {
}
.next-link-item {
}
</style>
3.父组件中调用封装的组件
<template>
<div class="hello">
<cpaginate
:pageCount="pageCount"
:marginPages="marginPages"
:rangePage="rangePage"
:initPage="initPage"
@pageEvent="pageEvent">
</cpaginate>
</div>
</template>
<script>
import cpaginate from './customPaginate'
export default {
components:{cpaginate},
data () {
return {
pageCount:20,
marginPages:2,
rangePage:5,
initPage:0,
}
},
methods:{
pageEvent:function(e){
console.log(e)
}
}
}
</script>
<style scoped>
.demo{
}
</style>
运行效果