index.js 3.6 KB

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