vue自定义翻页组件的方法

本文实例为大家分享了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自定义翻页组件的方法的详细内容...