本篇内容介绍了“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
},
}“vue怎么自定义翻页组件”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识可以关注亿速云网站，小编将为大家输出更多高质量的实用文章！
亿速云「云服务器」，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>>
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
