vxe-pc-ui 3.15.27 → 3.16.0

package/es/pager/src/pager.js

@@ -1,844 +0,0 @@
-import { defineVxeComponent } from '../../ui/src/comp';
-import XEUtils from 'xe-utils';
-import { getIcon, getConfig, getI18n, globalEvents, GLOBAL_EVENT_KEYS, createEvent, globalMixins } from '../../ui';
-import { createComponentLog } from '../../ui/src/log';
-import VxeSelectComponent from '../../select';
-import VxeNumberInputComponent from '../../number-input';
-const { warnLog, errLog } = createComponentLog('pager');
-export default {
-    name: 'VxePager',
-    mixins: [
-        globalMixins.sizeMixin
-    ],
-    props: {
-        size: {
-            type: String,
-            default: () => getConfig().pager.size || getConfig().size
-        },
-        // 自定义布局
-        layouts: {
-            type: Array,
-            default: () => getConfig().pager.layouts || ['PrevJump', 'PrevPage', 'Jump', 'PageCount', 'NextPage', 'NextJump', 'Sizes', 'Total']
-        },
-        // 当前页
-        currentPage: {
-            type: Number,
-            default: 1
-        },
-        // 加载中
-        loading: Boolean,
-        // 每页大小
-        pageSize: {
-            type: Number,
-            default: () => getConfig().pager.pageSize || 10
-        },
-        // 总条数
-        total: { type: Number, default: 0 },
-        // 显示页码按钮的数量
-        pagerCount: {
-            type: Number,
-            default: () => getConfig().pager.pagerCount || 7
-        },
-        // 每页大小选项列表
-        pageSizes: {
-            type: Array,
-            default: () => getConfig().pager.pageSizes || [10, 15, 20, 50, 100]
-        },
-        // 列对齐方式
-        align: {
-            type: String,
-            default: () => getConfig().pager.align
-        },
-        // 带边框
-        border: {
-            type: Boolean,
-            default: () => getConfig().pager.border
-        },
-        // 带背景颜色
-        background: {
-            type: Boolean,
-            default: () => getConfig().pager.background
-        },
-        // 配套的样式
-        perfect: {
-            type: Boolean,
-            default: () => getConfig().pager.perfect
-        },
-        // 当只有一页时隐藏
-        autoHidden: {
-            type: Boolean,
-            default: () => getConfig().pager.autoHidden
-        },
-        transfer: {
-            type: Boolean,
-            default: () => getConfig().pager.transfer
-        },
-        className: [String, Function],
-        pageSizePlacement: {
-            type: String,
-            default: () => getConfig().pager.pageSizePlacement
-        },
-        // 自定义图标
-        iconPrevPage: String,
-        iconJumpPrev: String,
-        iconJumpNext: String,
-        iconNextPage: String,
-        iconJumpMore: String,
-        iconHomePage: String,
-        iconEndPage: String
-    },
-    inject: {
-        $xeGrid: {
-            default: null
-        }
-    },
-    data() {
-        const xID = XEUtils.uniqueId();
-        const reactData = {
-            inpCurrPage: 1
-        };
-        return {
-            xID,
-            reactData
-        };
-    },
-    computed: Object.assign(Object.assign({}, {}), { computePageCount() {
-            const $xePager = this;
-            const props = $xePager;
-            return $xePager.getPageCount(props.total, props.pageSize);
-        },
-        computeNumList() {
-            const $xePager = this;
-            const props = $xePager;
-            const { pagerCount } = props;
-            const pageCount = $xePager.computePageCount;
-            const len = pageCount > pagerCount ? pagerCount - 2 : pagerCount;
-            const rest = [];
-            for (let index = 0; index < len; index++) {
-                rest.push(index);
-            }
-            return rest;
-        },
-        computeOffsetNumber() {
-            const $xePager = this;
-            const props = $xePager;
-            return Math.floor((props.pagerCount - 2) / 2);
-        },
-        computeSizeList() {
-            const $xePager = this;
-            const props = $xePager;
-            return props.pageSizes.map((item) => {
-                if (XEUtils.isNumber(item)) {
-                    return {
-                        value: item,
-                        label: `${getI18n('vxe.pager.pagesize', [item])}`
-                    };
-                }
-                return Object.assign({ value: '', label: '' }, item);
-            });
-        } }),
-    methods: {
-        //
-        // Method
-        //
-        dispatchEvent(type, params, evnt) {
-            const $xePager = this;
-            $xePager.$emit(type, createEvent(evnt, { $pager: $xePager }, params));
-        },
-        setPageSize(num) {
-            const $xePager = this;
-            $xePager.pageSizeEvent({ value: num });
-            return $xePager.$nextTick();
-        },
-        setPageSizeByEvent(evnt, num) {
-            const $xePager = this;
-            $xePager.pageSizeEvent({ value: num, $event: evnt });
-        },
-        homePage() {
-            const $xePager = this;
-            $xePager.handleHomePage();
-            return $xePager.$nextTick();
-        },
-        homePageByEvent(evnt) {
-            const $xePager = this;
-            $xePager.handleHomePage(evnt);
-        },
-        endPage() {
-            const $xePager = this;
-            $xePager.handleEndPage();
-            return $xePager.$nextTick();
-        },
-        endPageByEvent(evnt) {
-            const $xePager = this;
-            $xePager.handleEndPage(evnt);
-        },
-        prevPage() {
-            const $xePager = this;
-            $xePager.handlePrevPage();
-            return $xePager.$nextTick();
-        },
-        prevPageByEvent(evnt) {
-            const $xePager = this;
-            $xePager.handlePrevPage(evnt);
-        },
-        nextPage() {
-            const $xePager = this;
-            $xePager.handleNextPage();
-            return $xePager.$nextTick();
-        },
-        nextPageByEvent(evnt) {
-            const $xePager = this;
-            $xePager.handleNextPage(evnt);
-        },
-        prevJump() {
-            const $xePager = this;
-            $xePager.handlePrevJump();
-            return $xePager.$nextTick();
-        },
-        prevJumpByEvent(evnt) {
-            const $xePager = this;
-            $xePager.handlePrevJump(evnt);
-        },
-        nextJump() {
-            const $xePager = this;
-            $xePager.handleNextJump();
-            return $xePager.$nextTick();
-        },
-        nextJumpByEvent(evnt) {
-            const $xePager = this;
-            $xePager.handleNextJump(evnt);
-        },
-        setCurrentPage(currentPage) {
-            const $xePager = this;
-            const reactData = $xePager.reactData;
-            const current = XEUtils.toNumber(currentPage) || 1;
-            reactData.inpCurrPage = current;
-            $xePager.handleChangeCurrentPage(current);
-            return $xePager.$nextTick();
-        },
-        setCurrentPageByEvent(evnt, currentPage) {
-            const $xePager = this;
-            const reactData = $xePager.reactData;
-            const current = XEUtils.toNumber(currentPage) || 1;
-            reactData.inpCurrPage = current;
-            $xePager.handleChangeCurrentPage(current, evnt);
-        },
-        /**
-         * 已废弃，被 setCurrentPage 替换
-         * @deprecated
-         */
-        jumpPage(currentPage) {
-            const $xePager = this;
-            warnLog('vxe.error.delFunc', ['jumpPage', 'setCurrentPage']);
-            return $xePager.setCurrentPage(currentPage);
-        },
-        getPageCount(total, size) {
-            return Math.max(Math.ceil(total / size), 1);
-        },
-        handleJumpPageEvent(evnt, currentPage) {
-            const $xePager = this;
-            const props = $xePager;
-            $xePager.$emit('update:currentPage', currentPage);
-            if (evnt && currentPage !== props.currentPage) {
-                $xePager.dispatchEvent('page-change', { type: 'current', pageSize: props.pageSize, currentPage }, evnt);
-            }
-        },
-        handleChangeCurrentPage(currentPage, evnt) {
-            const $xePager = this;
-            const props = $xePager;
-            $xePager.$emit('update:currentPage', currentPage);
-            if (evnt && currentPage !== props.currentPage) {
-                $xePager.dispatchEvent('page-change', { type: 'current', pageSize: props.pageSize, currentPage }, evnt);
-            }
-        },
-        triggerJumpEvent(params) {
-            const $xePager = this;
-            const reactData = $xePager.reactData;
-            const { $event } = params;
-            const inputElem = $event.target;
-            const inpValue = XEUtils.toInteger(inputElem.value);
-            const pageCount = $xePager.computePageCount.value;
-            const current = inpValue <= 0 ? 1 : inpValue >= pageCount ? pageCount : inpValue;
-            const currPage = XEUtils.toValueString(current);
-            inputElem.value = currPage;
-            reactData.inpCurrPage = currPage;
-            $xePager.handleChangeCurrentPage(current, $event);
-        },
-        handleHomePage(evnt) {
-            const $xePager = this;
-            const props = $xePager;
-            const { currentPage } = props;
-            if (currentPage > 1) {
-                $xePager.handleChangeCurrentPage(1, evnt);
-            }
-        },
-        handleEndPage(evnt) {
-            const $xePager = this;
-            const props = $xePager;
-            const { currentPage } = props;
-            const pageCount = $xePager.computePageCount;
-            if (currentPage < pageCount) {
-                $xePager.handleChangeCurrentPage(pageCount, evnt);
-            }
-        },
-        handlePrevPage(evnt) {
-            const $xePager = this;
-            const props = $xePager;
-            const { currentPage } = props;
-            const pageCount = $xePager.computePageCount;
-            if (currentPage > 1) {
-                $xePager.handleChangeCurrentPage(Math.min(pageCount, Math.max(currentPage - 1, 1)), evnt);
-            }
-        },
-        handleNextPage(evnt) {
-            const $xePager = this;
-            const props = $xePager;
-            const { currentPage } = props;
-            const pageCount = $xePager.computePageCount;
-            if (currentPage < pageCount) {
-                $xePager.handleChangeCurrentPage(Math.min(pageCount, currentPage + 1), evnt);
-            }
-        },
-        handlePrevJump(evnt) {
-            const $xePager = this;
-            const props = $xePager;
-            const numList = $xePager.computeNumList;
-            $xePager.handleChangeCurrentPage(Math.max(props.currentPage - numList.length, 1), evnt);
-        },
-        handleNextJump(evnt) {
-            const $xePager = this;
-            const props = $xePager;
-            const pageCount = $xePager.computePageCount;
-            const numList = $xePager.computeNumList;
-            $xePager.handleChangeCurrentPage(Math.min(props.currentPage + numList.length, pageCount), evnt);
-        },
-        pageSizeEvent(params) {
-            const $xePager = this;
-            const props = $xePager;
-            const { value, $event } = params;
-            const pageSize = XEUtils.toNumber(value);
-            const pageCount = $xePager.getPageCount(props.total, pageSize);
-            let currentPage = props.currentPage;
-            if (currentPage > pageCount) {
-                currentPage = pageCount;
-                $xePager.$emit('update:currentPage', pageCount);
-            }
-            $xePager.$emit('update:pageSize', pageSize);
-            if ($event) {
-                $xePager.dispatchEvent('page-change', { type: 'size', pageSize, currentPage }, $event);
-            }
-        },
-        jumpKeydownEvent(params) {
-            const $xePager = this;
-            const { $event } = params;
-            if (globalEvents.hasKey($event, GLOBAL_EVENT_KEYS.ENTER)) {
-                $xePager.triggerJumpEvent(params);
-            }
-            else if (globalEvents.hasKey($event, GLOBAL_EVENT_KEYS.ARROW_UP)) {
-                $event.preventDefault();
-                $xePager.handleNextPage($event);
-            }
-            else if (globalEvents.hasKey($event, GLOBAL_EVENT_KEYS.ARROW_DOWN)) {
-                $event.preventDefault();
-                $xePager.handlePrevPage($event);
-            }
-        },
-        //
-        // Render
-        //
-        // 第一页
-        renderHomePage(h) {
-            const $xePager = this;
-            const props = $xePager;
-            const slots = $xePager.$scopedSlots;
-            const { currentPage, total } = props;
-            const homeSlot = slots.home;
-            const pageCount = $xePager.computePageCount;
-            if (homeSlot) {
-                return h('span', {
-                    class: 'vxe-pager--custom-home-btn'
-                }, homeSlot({ $pager: $xePager, total, currentPage, pageCount }));
-            }
-            return h('button', {
-                class: ['vxe-pager--home-btn', {
-                        'is--disabled': currentPage <= 1
-                    }],
-                attrs: {
-                    type: 'button',
-                    title: getI18n('vxe.pager.homePageTitle')
-                },
-                on: {
-                    click: $xePager.handleHomePage
-                }
-            }, [
-                h('i', {
-                    class: ['vxe-pager--btn-icon', props.iconHomePage || getIcon().PAGER_HOME]
-                })
-            ]);
-        },
-        // 上一页
-        renderPrevPage(h) {
-            const $xePager = this;
-            const props = $xePager;
-            const slots = $xePager.$scopedSlots;
-            const { currentPage, total } = props;
-            const prevPageSlot = slots.prevPage || slots['prev-page'];
-            const pageCount = $xePager.computePageCount;
-            if (prevPageSlot) {
-                return h('span', {
-                    class: 'vxe-pager--custom-prev-btn'
-                }, prevPageSlot({ $pager: $xePager, total, currentPage, pageCount }));
-            }
-            return h('button', {
-                class: ['vxe-pager--prev-btn', {
-                        'is--disabled': currentPage <= 1
-                    }],
-                attrs: {
-                    type: 'button',
-                    title: getI18n('vxe.pager.prevPageTitle')
-                },
-                on: {
-                    click: $xePager.handlePrevPage
-                }
-            }, [
-                h('i', {
-                    class: ['vxe-pager--btn-icon', props.iconPrevPage || getIcon().PAGER_PREV_PAGE]
-                })
-            ]);
-        },
-        // 向上翻页
-        renderPrevJump(h, tagName) {
-            const $xePager = this;
-            const props = $xePager;
-            const slots = $xePager.$scopedSlots;
-            const { currentPage, total } = props;
-            const prevJumpSlot = slots.prevJump || slots['prev-jump'];
-            const pageCount = $xePager.computePageCount;
-            if (prevJumpSlot) {
-                return h('span', {
-                    class: 'vxe-pager--custom-jump-prev'
-                }, prevJumpSlot({ $pager: $xePager, total, currentPage, pageCount }));
-            }
-            return h(tagName || 'button', {
-                class: ['vxe-pager--jump-prev', {
-                        'is--fixed': !tagName,
-                        'is--disabled': currentPage <= 1
-                    }],
-                attrs: {
-                    type: 'button',
-                    title: getI18n('vxe.pager.prevJumpTitle')
-                },
-                on: {
-                    click: $xePager.handlePrevJump
-                }
-            }, [
-                tagName
-                    ? h('i', {
-                        class: ['vxe-pager--jump-more-icon', props.iconJumpMore || getIcon().PAGER_JUMP_MORE]
-                    })
-                    : null,
-                h('i', {
-                    class: ['vxe-pager--jump-icon', props.iconJumpPrev || getIcon().PAGER_JUMP_PREV]
-                })
-            ]);
-        },
-        // 向下翻页
-        renderNextJump(h, tagName) {
-            const $xePager = this;
-            const props = $xePager;
-            const slots = $xePager.$scopedSlots;
-            const { currentPage, total } = props;
-            const nextJumpSlot = slots.nextJump || slots['next-jump'];
-            const pageCount = $xePager.computePageCount;
-            if (nextJumpSlot) {
-                return h('span', {
-                    class: 'vxe-pager--custom-jump-next'
-                }, nextJumpSlot({ $pager: $xePager, total, currentPage, pageCount }));
-            }
-            return h(tagName || 'button', {
-                class: ['vxe-pager--jump-next', {
-                        'is--fixed': !tagName,
-                        'is--disabled': currentPage >= pageCount
-                    }],
-                attrs: {
-                    type: 'button',
-                    title: getI18n('vxe.pager.nextJumpTitle')
-                },
-                on: {
-                    click: $xePager.handleNextJump
-                }
-            }, [
-                tagName
-                    ? h('i', {
-                        class: ['vxe-pager--jump-more-icon', props.iconJumpMore || getIcon().PAGER_JUMP_MORE]
-                    })
-                    : null,
-                h('i', {
-                    class: ['vxe-pager--jump-icon', props.iconJumpNext || getIcon().PAGER_JUMP_NEXT]
-                })
-            ]);
-        },
-        // 下一页
-        renderNextPage(h) {
-            const $xePager = this;
-            const props = $xePager;
-            const slots = $xePager.$scopedSlots;
-            const { currentPage, total } = props;
-            const nextPageSlot = slots.nextPage || slots['next-page'];
-            const pageCount = $xePager.computePageCount;
-            if (nextPageSlot) {
-                return h('span', {
-                    class: 'vxe-pager--custom-next-btn'
-                }, nextPageSlot({ $pager: $xePager, total, currentPage, pageCount }));
-            }
-            return h('button', {
-                class: ['vxe-pager--next-btn', {
-                        'is--disabled': currentPage >= pageCount
-                    }],
-                attrs: {
-                    type: 'button',
-                    title: getI18n('vxe.pager.nextPageTitle')
-                },
-                on: {
-                    click: $xePager.handleNextPage
-                }
-            }, [
-                h('i', {
-                    class: ['vxe-pager--btn-icon', props.iconNextPage || getIcon().PAGER_NEXT_PAGE]
-                })
-            ]);
-        },
-        // 最后一页
-        renderEndPage(h) {
-            const $xePager = this;
-            const props = $xePager;
-            const slots = $xePager.$scopedSlots;
-            const { currentPage, total } = props;
-            const endSlot = slots.end;
-            const pageCount = $xePager.computePageCount;
-            if (endSlot) {
-                return h('span', {
-                    class: 'vxe-pager--custom-end-btn'
-                }, endSlot({ $pager: $xePager, total, currentPage, pageCount }));
-            }
-            return h('button', {
-                class: ['vxe-pager--end-btn', {
-                        'is--disabled': currentPage >= pageCount
-                    }],
-                attrs: {
-                    type: 'button',
-                    title: getI18n('vxe.pager.endPageTitle')
-                },
-                on: {
-                    click: $xePager.handleEndPage
-                }
-            }, [
-                h('i', {
-                    class: ['vxe-pager--btn-icon', props.iconEndPage || getIcon().PAGER_END]
-                })
-            ]);
-        },
-        // 页数
-        renderNumber(h, showJump) {
-            const $xePager = this;
-            const props = $xePager;
-            const slots = $xePager.$scopedSlots;
-            const { currentPage, total, pagerCount } = props;
-            const numberSlot = showJump ? (slots.numberJump || slots['number-jump']) : slots.number;
-            const nums = [];
-            const pageCount = $xePager.computePageCount;
-            const numList = $xePager.computeNumList;
-            const offsetNumber = $xePager.computeOffsetNumber;
-            const isOv = pageCount > pagerCount;
-            const isLt = isOv && currentPage > offsetNumber + 1;
-            const isGt = isOv && currentPage < pageCount - offsetNumber;
-            const restList = [];
-            let startNumber = 1;
-            if (isOv) {
-                if (currentPage >= pageCount - offsetNumber) {
-                    startNumber = Math.max(pageCount - numList.length + 1, 1);
-                }
-                else {
-                    startNumber = Math.max(currentPage - offsetNumber, 1);
-                }
-            }
-            if (showJump && isLt) {
-                restList.push(1);
-                nums.push(h('button', {
-                    class: 'vxe-pager--num-btn',
-                    attrs: {
-                        type: 'button'
-                    },
-                    on: {
-                        click: (evnt) => $xePager.handleJumpPageEvent(evnt, 1)
-                    }
-                }, '1'), $xePager.renderPrevJump(h, 'span'));
-            }
-            numList.forEach((item, index) => {
-                const number = startNumber + index;
-                if (number <= pageCount) {
-                    restList.push(number);
-                    nums.push(h('button', {
-                        key: number,
-                        class: ['vxe-pager--num-btn', {
-                                'is--active': currentPage === number
-                            }],
-                        attrs: {
-                            type: 'button'
-                        },
-                        on: {
-                            click: (evnt) => $xePager.handleJumpPageEvent(evnt, number)
-                        }
-                    }, `${number}`));
-                }
-            });
-            if (showJump && isGt) {
-                restList.push(pageCount);
-                nums.push($xePager.renderNextJump(h, 'button'), h('button', {
-                    class: 'vxe-pager--num-btn',
-                    attrs: {
-                        type: 'button'
-                    },
-                    on: {
-                        click: (evnt) => $xePager.handleJumpPageEvent(evnt, pageCount)
-                    }
-                }, pageCount));
-            }
-            if (numberSlot) {
-                return h('span', {
-                    class: 'vxe-pager--custom-btn-wrapper'
-                }, numberSlot({ $pager: $xePager, total, numList: restList, currentPage, pageCount }));
-            }
-            return h('span', {
-                class: 'vxe-pager--btn-wrapper'
-            }, nums);
-        },
-        // jumpNumber
-        renderJumpNumber(h) {
-            const $xePager = this;
-            return $xePager.renderNumber(h, true);
-        },
-        // sizes
-        renderSizes(h) {
-            const $xePager = this;
-            const props = $xePager;
-            const slots = $xePager.$scopedSlots;
-            const { currentPage, total, pageSize, pageSizePlacement, transfer } = props;
-            const sizesSlot = slots.sizes;
-            const sizeList = $xePager.computeSizeList;
-            const pageCount = $xePager.computePageCount;
-            if (sizesSlot) {
-                return h('span', {
-                    class: 'vxe-pager--custom-sizes'
-                }, sizesSlot({ $pager: $xePager, total, currentPage, pageCount, pageSize, options: sizeList }));
-            }
-            return h(VxeSelectComponent, {
-                class: 'vxe-pager--sizes',
-                props: {
-                    value: pageSize,
-                    placement: pageSizePlacement,
-                    transfer: transfer,
-                    options: sizeList
-                },
-                on: {
-                    change: $xePager.pageSizeEvent
-                }
-            });
-        },
-        // Jump
-        renderJump(h, isFull) {
-            const $xePager = this;
-            const props = $xePager;
-            const reactData = $xePager.reactData;
-            const slots = $xePager.$scopedSlots;
-            const { total } = props;
-            const { inpCurrPage } = reactData;
-            const jumpSlot = isFull ? (slots.fullJump || slots['full-jump']) : slots.jump;
-            const pageCount = $xePager.computePageCount;
-            if (jumpSlot) {
-                return h('span', {
-                    class: 'vxe-pager--custom-jump'
-                }, jumpSlot({ $pager: $xePager, total, currentPage: inpCurrPage, pageCount }));
-            }
-            return h('span', {
-                class: 'vxe-pager--jump'
-            }, [
-                isFull
-                    ? h('span', {
-                        class: 'vxe-pager--goto-text'
-                    }, getI18n('vxe.pager.goto'))
-                    : null,
-                h(VxeNumberInputComponent, {
-                    class: 'vxe-pager--goto',
-                    props: {
-                        value: inpCurrPage,
-                        placeholder: getI18n('vxe.pager.gotoTitle'),
-                        align: 'center',
-                        type: 'integer',
-                        max: pageCount,
-                        min: 1,
-                        controls: false
-                    },
-                    on: {
-                        keydown: $xePager.jumpKeydownEvent,
-                        blur: $xePager.triggerJumpEvent,
-                        'modelValue'(val) {
-                            reactData.inpCurrPage = val;
-                        }
-                    }
-                }),
-                isFull
-                    ? h('span', {
-                        class: 'vxe-pager--classifier-text'
-                    }, getI18n('vxe.pager.pageClassifier'))
-                    : null
-            ]);
-        },
-        // FullJump
-        renderFullJump(h) {
-            const $xePager = this;
-            return $xePager.renderJump(h, true);
-        },
-        // PageCount
-        renderPageCount(h) {
-            const $xePager = this;
-            const props = $xePager;
-            const slots = $xePager.$scopedSlots;
-            const { currentPage, total } = props;
-            const pageCountSlot = slots.pageCount || slots['page-count'];
-            const pageCount = $xePager.computePageCount;
-            if (pageCountSlot) {
-                return h('span', {
-                    class: 'vxe-pager--custom-count'
-                }, pageCountSlot({ $pager: $xePager, total, currentPage, pageCount }));
-            }
-            return h('span', {
-                class: 'vxe-pager--count'
-            }, [
-                h('span', {
-                    class: 'vxe-pager--separator'
-                }),
-                h('span', pageCount)
-            ]);
-        },
-        // total
-        renderTotal(h) {
-            const $xePager = this;
-            const props = $xePager;
-            const slots = $xePager.$scopedSlots;
-            const { total, currentPage } = props;
-            const totalSlot = slots.total;
-            const pageCount = $xePager.computePageCount;
-            if (totalSlot) {
-                return h('span', {
-                    class: 'vxe-pager--custom-total'
-                }, totalSlot({ $pager: $xePager, total, currentPage, pageCount }));
-            }
-            return h('span', {
-                class: 'vxe-pager--total'
-            }, getI18n('vxe.pager.total', [total]));
-        },
-        renderVN(h) {
-            const $xePager = this;
-            const props = $xePager;
-            const slots = $xePager.$scopedSlots;
-            const $xeGrid = $xePager.$xeGrid;
-            const { align, layouts, className } = props;
-            const childNodes = [];
-            const vSize = $xePager.computeSize;
-            const pageCount = $xePager.computePageCount;
-            if (slots.left) {
-                childNodes.push(h('span', {
-                    class: 'vxe-pager--left-wrapper'
-                }, slots.left({ $grid: $xeGrid })));
-            }
-            layouts.forEach((name) => {
-                let renderFn;
-                switch (name) {
-                    case 'Home':
-                        renderFn = $xePager.renderHomePage;
-                        break;
-                    case 'PrevJump':
-                        renderFn = $xePager.renderPrevJump;
-                        break;
-                    case 'PrevPage':
-                        renderFn = $xePager.renderPrevPage;
-                        break;
-                    case 'Number':
-                        renderFn = $xePager.renderNumber;
-                        break;
-                    case 'JumpNumber':
-                        renderFn = $xePager.renderJumpNumber;
-                        break;
-                    case 'NextPage':
-                        renderFn = $xePager.renderNextPage;
-                        break;
-                    case 'NextJump':
-                        renderFn = $xePager.renderNextJump;
-                        break;
-                    case 'End':
-                        renderFn = $xePager.renderEndPage;
-                        break;
-                    case 'Sizes':
-                        renderFn = $xePager.renderSizes;
-                        break;
-                    case 'FullJump':
-                        renderFn = $xePager.renderFullJump;
-                        break;
-                    case 'Jump':
-                        renderFn = $xePager.renderJump;
-                        break;
-                    case 'PageCount':
-                        renderFn = $xePager.renderPageCount;
-                        break;
-                    case 'Total':
-                        renderFn = $xePager.renderTotal;
-                        break;
-                }
-                if (renderFn) {
-                    childNodes.push(renderFn(h));
-                }
-                else {
-                    errLog('vxe.error.notProp', [`layouts -> ${name}`]);
-                }
-            });
-            if (slots.right) {
-                childNodes.push(h('span', {
-                    class: 'vxe-pager--right-wrapper'
-                }, slots.right({ $grid: $xeGrid })));
-            }
-            return h('div', {
-                ref: 'refElem',
-                class: ['vxe-pager', className ? (XEUtils.isFunction(className) ? className({ $pager: $xePager }) : className) : '', {
-                        [`size--${vSize}`]: vSize,
-                        [`align--${align}`]: align,
-                        'is--border': props.border,
-                        'is--background': props.background,
-                        'is--perfect': props.perfect,
-                        'is--hidden': props.autoHidden && pageCount === 1,
-                        'is--loading': props.loading
-                    }]
-            }, [
-                h('div', {
-                    class: 'vxe-pager--wrapper'
-                }, childNodes)
-            ]);
-        }
-    },
-    watch: {
-        currentPage(val) {
-            const $xePager = this;
-            const reactData = $xePager.reactData;
-            reactData.inpCurrPage = val;
-        }
-    },
-    created() {
-        const $xePager = this;
-        const props = $xePager;
-        const reactData = $xePager.reactData;
-        reactData.inpCurrPage = props.currentPage;
-    },
-    render(h) {
-        return this.renderVN(h);
-    }
-};