VUE简单封装分页器组件

效果

说在前面

分页器是列表展示页面必备组件之一，由于项目需要，所以我也简单的封装了一个分页器组件，效果如上图。

组件设计

入参

	props: {
        //总数
        total: {
            type: Number,
            default: 100,
        },
        //每页条数
        pageSize: {
            type: Number,
            default: 10,
        },
        //数字页码展示个数
        showNum: {
            type: Number,
            default: 3,
        },
        //当前页码
        currentPage: {
            type: Number,
            default: 1,
        },
        //当前页码颜色
        activePageColor: {
            type: String,
            default: '#2A97FF',
        },
    },

变量监听，动态计算展示的页码

watch: {
    currentPage(newVal) {
        this.calPages(newVal);
        this.currentPageT = newVal;
    },
    pageSize() {
        this.calPages(this.currentPage);
    },
},
methods: {
    calPages(newVal) {
        const left = Math.ceil(this.showNum / 2);
        this.startPage =
            left > newVal
            	? 0
             	: Math.min(newVal - left, this.getPageNum() - this.showNum);
        this.endPage = Math.min(
            this.getPageNum(),
            this.startPage + this.showNum
        );
    },
    getPageNum() {
        return Math.ceil(this.total / this.pageSize);
    },
}

页码跳转事件

jumpPage(currentPageT) {
    if (currentPageT <= 0 || currentPageT > this.getPageNum()) return;
    this.currentPageT = parseInt(currentPageT);
    this.$emit('currentPageChange', parseInt(currentPageT));
},

完整代码

<template>
    <div class="pagination-item">
        <div class="total">总共{{ getPageNum() }}页,{{ total }}条数据</div>
        <div class="pagination-content">
            <span
                >每页<input
                    v-model="pageSizeT"
                    @change="pageSizeChange(pageSizeT)"
                />条</span
            >
            <span class="btn btn-pre" @click="jumpPage(currentPageT - 1)"
                ><</span
            >
            <span
                v-for="num in endPage - startPage"
                :key="num"
                :style="
                    currentPageT === num + startPage
                        ? 'color:' + activePageColor + ';'
                        : ''
                "
                class="btn btn-num"
                @click="jumpPage(num + startPage)"
                >{{ num + startPage }}</span
            >
            <span class="btn btn-next" @click="jumpPage(currentPageT + 1)"
                >></span
            >
            <span
                ><input v-model="currentPageT" type="number" /><span
                    class="btn btn-jump"
                    @click="jumpPage(currentPageT)"
                    >跳转</span
                ></span
            >
        </div>
    </div>
</template>
<script>
export default {
    name: 'pagination',
    props: {
        //总数
        total: {
            type: Number,
            default: 100,
        },
        //每页条数
        pageSize: {
            type: Number,
            default: 10,
        },
        //数字页码展示个数
        showNum: {
            type: Number,
            default: 3,
        },
        //当前页码
        currentPage: {
            type: Number,
            default: 1,
        },
        //当前页码颜色
        activePageColor: {
            type: String,
            default: '#2A97FF',
        },
    },
    data() {
        return {
            totalT: this.total,
            pageSizeT: this.pageSize,
            currentPageT: '',
            startPage: 0,
            endPage: 0,
        };
    },
    watch: {
        currentPage(newVal) {
            this.calPages(newVal);
            this.currentPageT = newVal;
        },
        pageSize() {
            this.calPages(this.currentPage);
        },
    },
    mounted() {
        this.initData();
    },
    methods: {
        calPages(newVal) {
            const left = Math.ceil(this.showNum / 2);
            this.startPage =
                left > newVal
                    ? 0
                    : Math.min(newVal - left, this.getPageNum() - this.showNum);
            this.endPage = Math.min(
                this.getPageNum(),
                this.startPage + this.showNum
            );
        },
        getPageNum() {
            return Math.ceil(this.total / this.pageSize);
        },
        initData() {
            this.endPage = Math.min(
                this.getPageNum(),
                this.startPage + this.showNum
            );
            if (this.endPage !== 0) this.currentPageT = 1;
        },
        jumpPage(currentPageT) {
            if (currentPageT <= 0 || currentPageT > this.getPageNum()) return;
            this.currentPageT = parseInt(currentPageT);
            this.$emit('currentPageChange', parseInt(currentPageT));
        },
        pageSizeChange(pageSizeT) {
            this.$emit('pageSizeChange', parseInt(pageSizeT));
        },
    },
};
</script>
<style lang="less" scoped>
.pagination-item {
    font-size: 4vw;
    .total {
        text-align: center;
    }
    .pagination-content {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-around;
        input {
            width: 10vw;
            border: rgb(201, 194, 194) 1px solid;
            text-align: center;
        }
    }
}
</style>

组件引用

<template>
    <div class="search-result-page">
        <pagination
            v-if="currentTab !== 3"
            :total="total"
            :page-size="pageSize"
            :show-num="showNum"
            :current-page="currentPage"
            @currentPageChange="currentPageChange"
            @pageSizeChange="pageSizeChange"
        ></pagination>
    </div>
</template>
<script>
import pagination from '../components/pagination.vue';
export default {
    name: 'searchResult',
    components: {
        pagination,
    },
    data() {
        return {
            total: 100,
            showNum: 5,
            pageSize: 10,
            currentPage: 1,
        };
    },
    mounted() { },
    methods: {
        currentPageChange(currentPage) {
            this.currentPage = currentPage;
        },
        pageSizeChange(pageSize) {
            this.pageSize = pageSize;
        },
    },
};
</script>
<style lang="less" scoped></style>

写在后面

更多有趣组件可以查看 http://120.79.163.94/JYeontuComponents/#/homePage

最后

以上就是聪慧纸飞机为你收集整理的VUE简单封装分页器组件的全部内容，希望文章能够帮你解决VUE简单封装分页器组件所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。