cellsysArt/components/Pagination/index.vue

<template>
    <div
        :class="{ hidden: hidden }"
        class="pagination-container">
        <el-pagination
            v-if="!GLOBAL.isMobile"
            class="pagination"
            :background="background"
            :current-page.sync="currentPage"
            :page-size.sync="pageSize"
            :layout="layout"
            :page-sizes="pageSizes"
            :total="total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :small="small"
            :pager-count="pagerCount" />
        <div
            class="mobile-pagination"
            v-if="GLOBAL.isMobile">
            <button
                type="button"
                class="mobile-button"
                @click="handlePre">
                <i class="button-pre"></i>
            </button>
            <div class="page-number">{{ currentPage }}/{{ totalPage }}</div>
            <button
                type="button"
                class="mobile-button"
                @click="handleNext">
                <i class="button-next"></i>
            </button>
            <label class="page-input-wrap">
                <input
                    class="Input"
                    v-model="currentPage" />
            </label>
            <button
                type="button"
                class="mobile-button"
                @click="handleMobilePageChange">
                跳转
            </button>
        </div>
    </div>
</template>

<script>
export default {
    name: 'Pagination',
    props: {
        small: {
            type: Boolean,
            default: false,
        },
        total: {
            required: true,
            type: Number,
        },
        page: {
            //currentPage
            type: Number,
            default: 1,
        },
        limit: {
            //pageSize
            type: Number,
            default: 20,
        },
        pageSizes: {
            type: Array,
            default() {
                return [10, 20, 30, 50];
            },
        },
        layout: {
            type: String,
            default: 'total, sizes, prev, pager, next, jumper',
        },
        background: {
            type: Boolean,
            default: true,
        },
        autoScroll: {
            type: Boolean,
            default: true,
        },
        hidden: {
            type: Boolean,
            default: false,
        },
        pagerCount: {
            type: Number,
            default: 7,
        },
        /**yrd 删除el-pagination 中:page-count="pageCount" 总页数，total 和 page-count 设置任意一个就可以达到显示页码的功能；如果要支持 page-sizes 的更改，则需要使用 total 属性*/
        // pageCount: Number,
    },
    computed: {
        currentPage: {
            get() {
                return this.page;
            },
            set(val) {
                if (!val) {
                    val = 1;
                }
                this.$emit('update:page', parseInt(val, 10));
            },
        },
        pageSize: {
            get() {
                return this.limit;
            },
            set(val) {
                this.$emit('update:limit', val);
            },
        },
        totalPage() {
            return Math.ceil(this.total / this.pageSize);
        },
    },
    methods: {
        handleSizeChange(val) {
            this.$emit('pageChange', { currentPage: this.currentPage, pageSize: val });
            if (this.autoScroll) {
                //scrollTo(0, 800)
            }
        },
        handleCurrentChange(val) {
            this.$emit('pageChange', { currentPage: val, pageSize: this.pageSize });

            if (this.autoScroll) {
                //scrollTo(0, 800)
            }
        },
        handleMobilePageChange() {
            this.$emit('pageChange', {
                currentPage: parseInt(this.currentPage, 10),
                pageSize: this.pageSize,
            });
        },
        handlePre: function () {
            let currentPage = this.currentPage;
            if (currentPage > 1) {
                currentPage = currentPage - 1;
                this.$emit('pageChange', { currentPage: currentPage, pageSize: this.pageSize });
            }
        },
        handleNext: function () {
            let currentPage = this.currentPage;
            if (currentPage < this.totalPage) {
                currentPage = currentPage + 1;
                this.$emit('pageChange', { currentPage: currentPage, pageSize: this.pageSize });
            }
        },
    },
};
</script>

<style scoped>
.pagination-container {
    background: #fff;

    & .pagination {
        padding: 10px 0;
    }

    & .mobile-pagination {

    }
}

.hidden {
    display: none;
}

@media screen and (max-width: 1025px) {
    .mobile-pagination {
        position: absolute;
        z-index: 2;
        width: 100%;
        bottom: 0;
        left: 0;
        display: flex;
        padding: 10px 0;
        justify-content: center;
        border-top: 1px solid #d3d3d3;
        background-color: #fff;
    }

    .mobile-button {
        display: inline-block;
        padding: 0 16px;
        font-size: 14px;
        line-height: 32px;
        color: #8590a6;
        text-align: center;
        cursor: pointer;
        background: none;
        border: 1px solid;
        border-radius: 3px;

        & .button-pre {
            display: inline-block;
            width: 0px;
            height: 0px;
            border-top: 4px solid transparent;
            border-bottom: 4px solid transparent;
            border-right: 8px solid #8590a6;
            border-left: none;
        }

        & .button-next {
            display: inline-block;
            width: 0px;
            height: 0px;
            border-top: 4px solid transparent;
            border-bottom: 4px solid transparent;
            border-left: 8px solid #8590a6;
            border-right: none;
        }
    }

     .page-number {
        align-items: center;
        display: flex;
        padding: 0 10px;
    }

     .page-input-wrap {
        position: relative;
        display: flex;
        align-items: center;
        width: 60px;
        padding: 2px 6px;
        margin: 0 10px;
        font-size: 14px;
        background: #fff;
        border: 1px solid #ebebeb;
        border-radius: 3px;
        box-sizing: border-box;
        transition: background 0.2s, border 0.2s;
    }
}
</style>