index.js 4.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168
  1. import { createNamespace } from '../utils';
  2. import { BORDER } from '../utils/constant';
  3. var _createNamespace = createNamespace('pagination'),
  4. createComponent = _createNamespace[0],
  5. bem = _createNamespace[1],
  6. t = _createNamespace[2];
  7. function makePage(number, text, active) {
  8. return {
  9. number: number,
  10. text: text,
  11. active: active
  12. };
  13. }
  14. export default createComponent({
  15. props: {
  16. prevText: String,
  17. nextText: String,
  18. forceEllipses: Boolean,
  19. mode: {
  20. type: String,
  21. default: 'multi'
  22. },
  23. value: {
  24. type: Number,
  25. default: 0
  26. },
  27. pageCount: {
  28. type: [Number, String],
  29. default: 0
  30. },
  31. totalItems: {
  32. type: [Number, String],
  33. default: 0
  34. },
  35. itemsPerPage: {
  36. type: [Number, String],
  37. default: 10
  38. },
  39. showPageSize: {
  40. type: [Number, String],
  41. default: 5
  42. }
  43. },
  44. computed: {
  45. count: function count() {
  46. var count = this.pageCount || Math.ceil(this.totalItems / this.itemsPerPage);
  47. return Math.max(1, count);
  48. },
  49. pages: function pages() {
  50. var pages = [];
  51. var pageCount = this.count;
  52. var showPageSize = +this.showPageSize;
  53. if (this.mode !== 'multi') {
  54. return pages;
  55. } // Default page limits
  56. var startPage = 1;
  57. var endPage = pageCount;
  58. var isMaxSized = showPageSize < pageCount; // recompute if showPageSize
  59. if (isMaxSized) {
  60. // Current page is displayed in the middle of the visible ones
  61. startPage = Math.max(this.value - Math.floor(showPageSize / 2), 1);
  62. endPage = startPage + showPageSize - 1; // Adjust if limit is exceeded
  63. if (endPage > pageCount) {
  64. endPage = pageCount;
  65. startPage = endPage - showPageSize + 1;
  66. }
  67. } // Add page number links
  68. for (var number = startPage; number <= endPage; number++) {
  69. var page = makePage(number, number, number === this.value);
  70. pages.push(page);
  71. } // Add links to move between page sets
  72. if (isMaxSized && showPageSize > 0 && this.forceEllipses) {
  73. if (startPage > 1) {
  74. var previousPageSet = makePage(startPage - 1, '...', false);
  75. pages.unshift(previousPageSet);
  76. }
  77. if (endPage < pageCount) {
  78. var nextPageSet = makePage(endPage + 1, '...', false);
  79. pages.push(nextPageSet);
  80. }
  81. }
  82. return pages;
  83. }
  84. },
  85. watch: {
  86. value: {
  87. handler: function handler(page) {
  88. this.select(page || this.value);
  89. },
  90. immediate: true
  91. }
  92. },
  93. methods: {
  94. select: function select(page, emitChange) {
  95. page = Math.min(this.count, Math.max(1, page));
  96. if (this.value !== page) {
  97. this.$emit('input', page);
  98. if (emitChange) {
  99. this.$emit('change', page);
  100. }
  101. }
  102. }
  103. },
  104. render: function render() {
  105. var _this = this,
  106. _this$slots,
  107. _this$slots3;
  108. var h = arguments[0];
  109. var value = this.value;
  110. var simple = this.mode !== 'multi';
  111. var onSelect = function onSelect(value) {
  112. return function () {
  113. _this.select(value, true);
  114. };
  115. };
  116. return h("ul", {
  117. "class": bem({
  118. simple: simple
  119. })
  120. }, [h("li", {
  121. "class": [bem('item', {
  122. disabled: value === 1
  123. }), bem('prev'), BORDER],
  124. "on": {
  125. "click": onSelect(value - 1)
  126. }
  127. }, [((_this$slots = this.slots('prev-text')) != null ? _this$slots : this.prevText) || t('prev')]), this.pages.map(function (page) {
  128. var _this$slots2;
  129. return h("li", {
  130. "class": [bem('item', {
  131. active: page.active
  132. }), bem('page'), BORDER],
  133. "on": {
  134. "click": onSelect(page.number)
  135. }
  136. }, [(_this$slots2 = _this.slots('page', page)) != null ? _this$slots2 : page.text]);
  137. }), simple && h("li", {
  138. "class": bem('page-desc')
  139. }, [this.slots('pageDesc') || value + "/" + this.count]), h("li", {
  140. "class": [bem('item', {
  141. disabled: value === this.count
  142. }), bem('next'), BORDER],
  143. "on": {
  144. "click": onSelect(value + 1)
  145. }
  146. }, [((_this$slots3 = this.slots('next-text')) != null ? _this$slots3 : this.nextText) || t('next')])]);
  147. }
  148. });