TelpoUserManageAdmin/src/components/Pagination/index.vue

<template>
    <div :class="{'hidden':hidden}" class="pagination-container">
        <el-row class="pagination-row">
            <el-col :xs="20" :sm="20" :md="20" :lg="16" :xl="12">
                <el-pagination
                    :background="background"
                    :current-page.sync="currentPage"
                    :page-size.sync="pageSize"
                    :layout="layout"
                    :page-sizes="pageSizes"
                    small
                    ref="pagination"
                    :total="total"
                    v-bind="$attrs"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                />
            </el-col>
            <el-col :span="4" class="jump-button" v-show="isMobile">
                <el-button type="primary" @click="onJump">跳转</el-button>
            </el-col>
        </el-row>
    </div>
</template>

<script>
import { scrollTo } from "@/utils/scroll-to";

/* const { body } = document; */
export default {
    name: "Pagination",
    data() {
        return {
            screenWidth: document.body.clientWidth,
            /* isMobile: false */
        };
    },
    props: {
        total: {
            required: true,
            type: Number
        },
        page: {
            type: Number,
            default: 1
        },
        limit: {
            type: Number,
            default: 20
        },
        pageSizes: {
            type: Array,
            default() {
                return [10, 20, 30, 50];
            }
        },
        layout: {
            type: String,
            default: "total, sizes, prev, pager, next, jumper" //total, sizes, prev, pager, next, jumper
        },
        background: {
            type: Boolean,
            default: true
        },
        autoScroll: {
            type: Boolean,
            default: true
        },
        hidden: {
            type: Boolean,
            default: false
        }
    },
    computed: {
        currentPage: {
            get() {
                return this.page;
            },
            set(val) {
                this.$emit("update:page", val);
            }
        },
        pageSize: {
            get() {
                return this.limit;
            },
            set(val) {
                this.$emit("update:limit", val);
            }
        },
        // 防止在移动端刷新按钮消失
        isMobile: {
            get() {
                if(this.screenWidth < 991) {
                    return true
                } else {
                    return false
                }
            },
            set() {
                this.screenWidth
            }
        }
    },
    watch: {
        // 监听浏览器可视窗口变化
        screenWidth(val){
            const IWIDTH = 991;
            if(val - 1 < IWIDTH) {
                this.isMobile = true;
            } else {
                this.isMobile = false;
            }
        }
    },
    mounted() {
        this.getScreenWidth();
    },
    methods: {
        handleSizeChange(val) {
            this.$emit("pagination", { page: this.currentPage, limit: val });
            if (this.autoScroll) {
                scrollTo(0, 800);
            }
        },
        handleCurrentChange(val) {
            this.$emit("pagination", { page: val, limit: this.pageSize });
            if (this.autoScroll) {
                scrollTo(0, 800);
            }
        },
        // 跳转确认
        onJump() {
            let evtObj;
            let elevatorDiv = document.getElementsByClassName(
                "el-pagination__editor"
            );
            if (elevatorDiv && elevatorDiv.length > 0) {
                let pageInput = elevatorDiv[0].getElementsByTagName("input")[0];
                if (window.KeyEvent) {
                    //firefox 浏览器下模拟事件
                    evtObj = document.createEvent("KeyEvents");
                    evtObj.initKeyEvent(
                        "keyup",
                        true,
                        true,
                        window,
                        true,
                        false,
                        false,
                        false,
                        13,
                        0
                    );
                } else {
                    //chrome 浏览器下模拟事件
                    evtObj = document.createEvent("UIEvents");
                    evtObj.initUIEvent("keyup", true, true, window, 1);
                    delete evtObj.keyCode;
                    if (typeof evtObj.keyCode === "undefined") {
                        //为了模拟keycode
                        Object.defineProperty(evtObj, "keyCode", { value: 13 });
                    } else {
                        evtObj.key = String.fromCharCode(13);
                    }
                }
                pageInput.dispatchEvent(evtObj);
            }
        },
        // 获取浏览器可视化宽度
        getScreenWidth() {
            let that = this;
            window.onresize = () => {
                return (() => {
                    window.screenWidth = document.body.clientWidth;
                    that.screenWidth = window.screenWidth;
                })();
            };
        }
    }
};
</script>

<style scoped lang="scss">
.pagination-container {
    width: 100%;
    background: #fff;
    padding: 32px 16px;
}
.pagination-container.hidden {
    display: none;
}
</style>