123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168 |
- import { createNamespace } from '../utils';
- import { BORDER } from '../utils/constant';
- var _createNamespace = createNamespace('pagination'),
- createComponent = _createNamespace[0],
- bem = _createNamespace[1],
- t = _createNamespace[2];
- function makePage(number, text, active) {
- return {
- number: number,
- text: text,
- active: active
- };
- }
- export default createComponent({
- props: {
- prevText: String,
- nextText: String,
- forceEllipses: Boolean,
- mode: {
- type: String,
- default: 'multi'
- },
- value: {
- type: Number,
- default: 0
- },
- pageCount: {
- type: [Number, String],
- default: 0
- },
- totalItems: {
- type: [Number, String],
- default: 0
- },
- itemsPerPage: {
- type: [Number, String],
- default: 10
- },
- showPageSize: {
- type: [Number, String],
- default: 5
- }
- },
- computed: {
- count: function count() {
- var count = this.pageCount || Math.ceil(this.totalItems / this.itemsPerPage);
- return Math.max(1, count);
- },
- pages: function pages() {
- var pages = [];
- var pageCount = this.count;
- var showPageSize = +this.showPageSize;
- if (this.mode !== 'multi') {
- return pages;
- } // Default page limits
- var startPage = 1;
- var endPage = pageCount;
- var isMaxSized = showPageSize < pageCount; // recompute if showPageSize
- if (isMaxSized) {
- // Current page is displayed in the middle of the visible ones
- startPage = Math.max(this.value - Math.floor(showPageSize / 2), 1);
- endPage = startPage + showPageSize - 1; // Adjust if limit is exceeded
- if (endPage > pageCount) {
- endPage = pageCount;
- startPage = endPage - showPageSize + 1;
- }
- } // Add page number links
- for (var number = startPage; number <= endPage; number++) {
- var page = makePage(number, number, number === this.value);
- pages.push(page);
- } // Add links to move between page sets
- if (isMaxSized && showPageSize > 0 && this.forceEllipses) {
- if (startPage > 1) {
- var previousPageSet = makePage(startPage - 1, '...', false);
- pages.unshift(previousPageSet);
- }
- if (endPage < pageCount) {
- var nextPageSet = makePage(endPage + 1, '...', false);
- pages.push(nextPageSet);
- }
- }
- return pages;
- }
- },
- watch: {
- value: {
- handler: function handler(page) {
- this.select(page || this.value);
- },
- immediate: true
- }
- },
- methods: {
- select: function select(page, emitChange) {
- page = Math.min(this.count, Math.max(1, page));
- if (this.value !== page) {
- this.$emit('input', page);
- if (emitChange) {
- this.$emit('change', page);
- }
- }
- }
- },
- render: function render() {
- var _this = this,
- _this$slots,
- _this$slots3;
- var h = arguments[0];
- var value = this.value;
- var simple = this.mode !== 'multi';
- var onSelect = function onSelect(value) {
- return function () {
- _this.select(value, true);
- };
- };
- return h("ul", {
- "class": bem({
- simple: simple
- })
- }, [h("li", {
- "class": [bem('item', {
- disabled: value === 1
- }), bem('prev'), BORDER],
- "on": {
- "click": onSelect(value - 1)
- }
- }, [((_this$slots = this.slots('prev-text')) != null ? _this$slots : this.prevText) || t('prev')]), this.pages.map(function (page) {
- var _this$slots2;
- return h("li", {
- "class": [bem('item', {
- active: page.active
- }), bem('page'), BORDER],
- "on": {
- "click": onSelect(page.number)
- }
- }, [(_this$slots2 = _this.slots('page', page)) != null ? _this$slots2 : page.text]);
- }), simple && h("li", {
- "class": bem('page-desc')
- }, [this.slots('pageDesc') || value + "/" + this.count]), h("li", {
- "class": [bem('item', {
- disabled: value === this.count
- }), bem('next'), BORDER],
- "on": {
- "click": onSelect(value + 1)
- }
- }, [((_this$slots3 = this.slots('next-text')) != null ? _this$slots3 : this.nextText) || t('next')])]);
- }
- });
|