本文实例为大家分享了vue自定义翻页组件的具体代码，供大家参考，具体内容如下
效果图如下：
1、在components建立page.vue文件
<template>
<div class="pagination">
<!-- 上 -->
<button :disabled="pageNo == 1" @click="getPageNo(pageNo - 1)">
上一张
</button>
<button
v-if="startNumAndEndNum.start > 1"
@click="getPageNo(1)"
:class="{ active: pageNo == 1 }"
>1
</button>
<button
v-if="startNumAndEndNum.start > 2"
@click="getPageNo(pageNo - continues)"
>···
</button>
<!-- 中间部分 -->
<button
v-for="(page, index) in generateMiddlePage"
:key="index"
@click="getPageNo(page)"
:class="{ active: pageNo == page }">
{{ page }}
</button>
<!-- 下 -->
<button
v-if="startNumAndEndNum.end < totalPage - 1"
@click="getPageNo(pageNo +continues)"
>···
</button>
<button
v-if="startNumAndEndNum.end < totalPage"
@click="getPageNo(totalPage)"
:class="{active:pageNo==totalPage}">
{{ totalPage }}
</button>
<button
:disabled="pageNo == totalPage"
@click="getPageNo(pageNo + 1)">
下一张
</button>
</div>
</template>
<script>
export default {
name: "Pagination",
props: ["pageNo", "pageSize", "total", "continues"],
computed: {
//计算出总页数
totalPage() {
//向上取整
return Math.ceil(this.total / this.pageSize);
},
//计算出页码的起始和结束数字
startNumAndEndNum() {
const {continues, pageNo, totalPage} = this;
//先定义两个变量存储起始数字与结束数字
let start = 0,
end = 0;
if (continues > totalPage) {
start = 1;
end = totalPage;
} else {
//起始数字
start = pageNo - parseInt(continues / 2);
//结束数字
end = pageNo + parseInt(continues / 2);
if (start < 1) {
start = 1;
end = continues;
}
if (end > totalPage) {
end = totalPage;
start = totalPage - continues + 1;
}
}
return {start, end};
},
//过滤掉小于起始页的页码
generateMiddlePage() {
let arr = [];
//避免页面中同时使用 v-for和v-if
for (let i = 0; i <= this.startNumAndEndNum.end; i++) {
arr.push(i)
}
let temp = arr.filter(item => {
return item >= this.startNumAndEndNum.start
})
return temp
}
},
methods: {
getPageNo(val) {
//自定义事件子页面向父页面传参，计算属性值
this.$emit('getPageNo', val)
},
}
};
</script>
<style lang="scss" scoped>
.pagination {
text-align: center;
width: 70px;
button {
margin:12px 0px 0px 0px;
background-color: #fff;
color: #409eff;
border:1px solid #409eff;
outline: none;
border-radius: 2px;
padding: 0 4px;
vertical-align: top;
display: inline-block;
font-size: 14px;
width: 60px;
height: 38px;
line-height: 38px;
cursor: pointer;
box-sizing: border-box;
text-align: center;
&[disabled] {
color: #c0c4cc;
cursor: not-allowed;
border:1px solid #ddd;
}
&:hover{
background: #ddeffb;
}
&[disabled]:hover{ background: none;}
&.active {
cursor: not-allowed;
background-color: #409eff;
color: #fff;
}
}
}
</style>2、在页面中引入组件
<page
:pageNo="pageNo"
:pageSize="pageSize"
:total="pageTotal"
:continues="5" //超过5时中建按钮有省略号
@getPageNo="getPageNo"
/>
import page from '@/components/page'
data(){
return{
pageNo:1,
pageSize:1,
pageTotal:5,
}
}
//方法中
methods:{
getPageNo(pageNo){
this.pageNo=pageNo
},
}以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程网。
