vue项目自定义分页组件（PC）
近期做的pc项目是类似京东商城的，使用vue框架来实现的，商城项目必然少不了商品列表这些，所以用到分页这个功能，上网找了好多分页插件觉得都不是很理想，所以决定自己封装一个组件来用。
先给大家上张效果图
父页面传过来的参数
首先给大家介绍一下父组件需要传过来的参数
props:{
//父级页面传过来当前页面的路由
path:{
type:String,
default:''
},
//总条数
count:{
type:Number,
default:0
},
//每页显示多少条数据 默认是10
number:{
type:Number,
default:10
}
},
组件参数
这些参数是需要实时计算的
computed:{
//总页数 总条数➗每个显示的条数
totalPage(){
return Math.ceil(this.count / this.number)
},
//当前显示的是哪几个页面 他返回的是一个数组
pages(){
return this.getPageData(this.now)
},
//当前的页数
now () {
return this.$route.query.p || 1
}
},
废话不多说来 代码在此
在components里新建一个vue页面 因为我的所有组件都在components里面 大家可以根据自己的目录来建
templete
<template>
<div class="public-pagination" v-if="count">
<router-link :to="{path:path,query:{p:1}}" class="page" :class="{'disabled':now==1}">首页</router-link>
<ul class="page-list">
<li class="page-item" v-for="page in pages">
<template v-if="page.type == 'more'">
<a class="notPointer">{{page.num}}</a>
</template>
<router-link v-else :to="{path:path,query:{p:page.num}}"
class="notPointer"
:class="{'active-link':page.num==now}"
>{{page.num}}</router-link>
</li>
</ul>
<router-link :to="{path:path,query:{p:totalPage}}" class="page" :class="{'disabled':now == totalPage}">尾页</router-link>
</div>
</template>
script
<script>
export default {
props:{
path:{
type:String,
default:''
},
count:{
type:Number,
default:0
},
number:{
type:Number,
default:10
}
},
computed:{
totalPage(){
return Math.ceil(this.count / this.number)
},
pages(){
return this.getPageData(this.now)
},
now () {
return this.$route.query.p || 1
}
},
methods:{
getPageData(now){
now = parseInt(now,10)
let start = 0;
let end = 0;
let count = this.totalPage
let number = 7
let num = parseInt(number / 2)
if(now <= num + 1) {
start = 1
end = Math.min(number,count)
}else if(now < count - num) {
start = now - num
end = now + num
}else{
start = Math.max(1, count - number + 1)
end = count
}
let startMore = false
if(start > 1) {
start + 1
startMore = true
}
let endMore = false
if(end < count) {
start + 1
endMore = true
}
let arr = []
if(startMore){
arr.unshift({
type: 'more',
num: '...'
})
}
for(start; start<=end; start++){
arr.push({
type: 'link',
num: start
})
}
if(endMore){
arr.push({
type: 'more',
num: '...'
})
}
return arr
}
}
}
</script>
css
<style lang="less" rel="stylesheet/less">
//分页
.public-pagination{
height: 24px;
margin: 30px auto;
text-align: center;
.page{
display: inline-block;
width: 48px;
font-size: 12px;
line-height: 22px;
text-align: center;
background: #FCFCFC;
border: 1px solid #E0E0E0;
&.disabled{
&:hover{
color: #c0c4cc;
cursor: not-allowed;
}
}
}
.page-list{
display: inline-block;
margin: 0 10px;
font-size: 0;
line-height: 0;
.page-item{
display: inline-block;
margin-right: 10px;
&:last-child {
margin-right: 0;
}
.notPointer{
display: block;
font-size: 12px;
line-height: 22px;
color: #000;
text-align: center;
border: 1px solid #E0E0E0;
border-radius: 1px;
padding: 0 5px;
min-width: 12px;
&.active-link{
color: #fff;
background: #bf1a2c;
border-color:#bf1a2c ;
}
}
}
}
}
</style>
好了，以上就是组件的全部代码
父组件该如何调用？
分页组件的调用
1.在父页面引入
import paginationApp from '@/components/paginationApp'
components:{
paginationApp
},
2.深度监听路由的变化以便更好的数据渲染
watch:{
$route: {
handler: function(){
this.reset()
},
// 深度观察监听
deep: true
}
},
3.获取整个路径
computed:{
path(){
return this.$route.fullPath
}
},
4.使用组件
//path是当前页面的路由 count是数据的所有条数 number不传默认是10
<pagination-app :path="path" :count="count"></pagination-app>
好了这就是所有的代码了
你们的支持就是我继续分享总结的动力，希望能帮助到大家
有什么问题可以随时交流
附上github地址：https://github.com/roseTong
