Pagination.js 22 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671
  1. import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
  2. import { createTextVNode as _createTextVNode, createVNode as _createVNode } from "vue";
  3. var __rest = this && this.__rest || function (s, e) {
  4. var t = {};
  5. for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
  6. if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
  7. if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
  8. }
  9. return t;
  10. };
  11. import PropTypes from '../_util/vue-types';
  12. import BaseMixin from '../_util/BaseMixin';
  13. import { hasProp, getComponent, splitAttrs, isValidElement } from '../_util/props-util';
  14. import Pager from './Pager';
  15. import Options from './Options';
  16. import LOCALE from './locale/zh_CN';
  17. import KEYCODE from './KeyCode';
  18. import classNames from '../_util/classNames';
  19. import { defineComponent } from 'vue';
  20. import { cloneElement } from '../_util/vnode';
  21. import firstNotUndefined from '../_util/firstNotUndefined';
  22. import BaseInput from '../_util/BaseInput';
  23. // 是否是正整数
  24. function isInteger(value) {
  25. return typeof value === 'number' && isFinite(value) && Math.floor(value) === value;
  26. }
  27. function defaultItemRender(_ref) {
  28. let {
  29. originalElement
  30. } = _ref;
  31. return originalElement;
  32. }
  33. function calculatePage(p, state, props) {
  34. const pageSize = typeof p === 'undefined' ? state.statePageSize : p;
  35. return Math.floor((props.total - 1) / pageSize) + 1;
  36. }
  37. export default defineComponent({
  38. compatConfig: {
  39. MODE: 3
  40. },
  41. name: 'Pagination',
  42. mixins: [BaseMixin],
  43. inheritAttrs: false,
  44. props: {
  45. disabled: {
  46. type: Boolean,
  47. default: undefined
  48. },
  49. prefixCls: PropTypes.string.def('rc-pagination'),
  50. selectPrefixCls: PropTypes.string.def('rc-select'),
  51. current: Number,
  52. defaultCurrent: PropTypes.number.def(1),
  53. total: PropTypes.number.def(0),
  54. pageSize: Number,
  55. defaultPageSize: PropTypes.number.def(10),
  56. hideOnSinglePage: {
  57. type: Boolean,
  58. default: false
  59. },
  60. showSizeChanger: {
  61. type: Boolean,
  62. default: undefined
  63. },
  64. showLessItems: {
  65. type: Boolean,
  66. default: false
  67. },
  68. // showSizeChange: PropTypes.func.def(noop),
  69. selectComponentClass: PropTypes.any,
  70. showPrevNextJumpers: {
  71. type: Boolean,
  72. default: true
  73. },
  74. showQuickJumper: PropTypes.oneOfType([PropTypes.looseBool, PropTypes.object]).def(false),
  75. showTitle: {
  76. type: Boolean,
  77. default: true
  78. },
  79. pageSizeOptions: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string])),
  80. buildOptionText: Function,
  81. showTotal: Function,
  82. simple: {
  83. type: Boolean,
  84. default: undefined
  85. },
  86. locale: PropTypes.object.def(LOCALE),
  87. itemRender: PropTypes.func.def(defaultItemRender),
  88. prevIcon: PropTypes.any,
  89. nextIcon: PropTypes.any,
  90. jumpPrevIcon: PropTypes.any,
  91. jumpNextIcon: PropTypes.any,
  92. totalBoundaryShowSizeChanger: PropTypes.number.def(50)
  93. },
  94. data() {
  95. const props = this.$props;
  96. let current = firstNotUndefined([this.current, this.defaultCurrent]);
  97. const pageSize = firstNotUndefined([this.pageSize, this.defaultPageSize]);
  98. current = Math.min(current, calculatePage(pageSize, undefined, props));
  99. return {
  100. stateCurrent: current,
  101. stateCurrentInputValue: current,
  102. statePageSize: pageSize
  103. };
  104. },
  105. watch: {
  106. current(val) {
  107. this.setState({
  108. stateCurrent: val,
  109. stateCurrentInputValue: val
  110. });
  111. },
  112. pageSize(val) {
  113. const newState = {};
  114. let current = this.stateCurrent;
  115. const newCurrent = calculatePage(val, this.$data, this.$props);
  116. current = current > newCurrent ? newCurrent : current;
  117. if (!hasProp(this, 'current')) {
  118. newState.stateCurrent = current;
  119. newState.stateCurrentInputValue = current;
  120. }
  121. newState.statePageSize = val;
  122. this.setState(newState);
  123. },
  124. stateCurrent(_val, oldValue) {
  125. // When current page change, fix focused style of prev item
  126. // A hacky solution of https://github.com/ant-design/ant-design/issues/8948
  127. this.$nextTick(() => {
  128. if (this.$refs.paginationNode) {
  129. const lastCurrentNode = this.$refs.paginationNode.querySelector(`.${this.prefixCls}-item-${oldValue}`);
  130. if (lastCurrentNode && document.activeElement === lastCurrentNode) {
  131. lastCurrentNode.blur();
  132. }
  133. }
  134. });
  135. },
  136. total() {
  137. const newState = {};
  138. const newCurrent = calculatePage(this.pageSize, this.$data, this.$props);
  139. if (hasProp(this, 'current')) {
  140. const current = Math.min(this.current, newCurrent);
  141. newState.stateCurrent = current;
  142. newState.stateCurrentInputValue = current;
  143. } else {
  144. let current = this.stateCurrent;
  145. if (current === 0 && newCurrent > 0) {
  146. current = 1;
  147. } else {
  148. current = Math.min(this.stateCurrent, newCurrent);
  149. }
  150. newState.stateCurrent = current;
  151. }
  152. this.setState(newState);
  153. }
  154. },
  155. methods: {
  156. getJumpPrevPage() {
  157. return Math.max(1, this.stateCurrent - (this.showLessItems ? 3 : 5));
  158. },
  159. getJumpNextPage() {
  160. return Math.min(calculatePage(undefined, this.$data, this.$props), this.stateCurrent + (this.showLessItems ? 3 : 5));
  161. },
  162. getItemIcon(icon, label) {
  163. const {
  164. prefixCls
  165. } = this.$props;
  166. const iconNode = getComponent(this, icon, this.$props) || _createVNode("button", {
  167. "type": "button",
  168. "aria-label": label,
  169. "class": `${prefixCls}-item-link`
  170. }, null);
  171. return iconNode;
  172. },
  173. getValidValue(e) {
  174. const inputValue = e.target.value;
  175. const allPages = calculatePage(undefined, this.$data, this.$props);
  176. const {
  177. stateCurrentInputValue
  178. } = this.$data;
  179. let value;
  180. if (inputValue === '') {
  181. value = inputValue;
  182. } else if (isNaN(Number(inputValue))) {
  183. value = stateCurrentInputValue;
  184. } else if (inputValue >= allPages) {
  185. value = allPages;
  186. } else {
  187. value = Number(inputValue);
  188. }
  189. return value;
  190. },
  191. isValid(page) {
  192. return isInteger(page) && page !== this.stateCurrent;
  193. },
  194. shouldDisplayQuickJumper() {
  195. const {
  196. showQuickJumper,
  197. pageSize,
  198. total
  199. } = this.$props;
  200. if (total <= pageSize) {
  201. return false;
  202. }
  203. return showQuickJumper;
  204. },
  205. // calculatePage (p) {
  206. // let pageSize = p
  207. // if (typeof pageSize === 'undefined') {
  208. // pageSize = this.statePageSize
  209. // }
  210. // return Math.floor((this.total - 1) / pageSize) + 1
  211. // },
  212. handleKeyDown(event) {
  213. if (event.keyCode === KEYCODE.ARROW_UP || event.keyCode === KEYCODE.ARROW_DOWN) {
  214. event.preventDefault();
  215. }
  216. },
  217. handleKeyUp(e) {
  218. const value = this.getValidValue(e);
  219. const stateCurrentInputValue = this.stateCurrentInputValue;
  220. if (value !== stateCurrentInputValue) {
  221. this.setState({
  222. stateCurrentInputValue: value
  223. });
  224. }
  225. if (e.keyCode === KEYCODE.ENTER) {
  226. this.handleChange(value);
  227. } else if (e.keyCode === KEYCODE.ARROW_UP) {
  228. this.handleChange(value - 1);
  229. } else if (e.keyCode === KEYCODE.ARROW_DOWN) {
  230. this.handleChange(value + 1);
  231. }
  232. },
  233. changePageSize(size) {
  234. let current = this.stateCurrent;
  235. const preCurrent = current;
  236. const newCurrent = calculatePage(size, this.$data, this.$props);
  237. current = current > newCurrent ? newCurrent : current;
  238. // fix the issue:
  239. // Once 'total' is 0, 'current' in 'onShowSizeChange' is 0, which is not correct.
  240. if (newCurrent === 0) {
  241. current = this.stateCurrent;
  242. }
  243. if (typeof size === 'number') {
  244. if (!hasProp(this, 'pageSize')) {
  245. this.setState({
  246. statePageSize: size
  247. });
  248. }
  249. if (!hasProp(this, 'current')) {
  250. this.setState({
  251. stateCurrent: current,
  252. stateCurrentInputValue: current
  253. });
  254. }
  255. }
  256. this.__emit('update:pageSize', size);
  257. if (current !== preCurrent) {
  258. this.__emit('update:current', current);
  259. }
  260. this.__emit('showSizeChange', current, size);
  261. this.__emit('change', current, size);
  262. },
  263. handleChange(p) {
  264. const {
  265. disabled
  266. } = this.$props;
  267. let page = p;
  268. if (this.isValid(page) && !disabled) {
  269. const currentPage = calculatePage(undefined, this.$data, this.$props);
  270. if (page > currentPage) {
  271. page = currentPage;
  272. } else if (page < 1) {
  273. page = 1;
  274. }
  275. if (!hasProp(this, 'current')) {
  276. this.setState({
  277. stateCurrent: page,
  278. stateCurrentInputValue: page
  279. });
  280. }
  281. // this.__emit('input', page)
  282. this.__emit('update:current', page);
  283. this.__emit('change', page, this.statePageSize);
  284. return page;
  285. }
  286. return this.stateCurrent;
  287. },
  288. prev() {
  289. if (this.hasPrev()) {
  290. this.handleChange(this.stateCurrent - 1);
  291. }
  292. },
  293. next() {
  294. if (this.hasNext()) {
  295. this.handleChange(this.stateCurrent + 1);
  296. }
  297. },
  298. jumpPrev() {
  299. this.handleChange(this.getJumpPrevPage());
  300. },
  301. jumpNext() {
  302. this.handleChange(this.getJumpNextPage());
  303. },
  304. hasPrev() {
  305. return this.stateCurrent > 1;
  306. },
  307. hasNext() {
  308. return this.stateCurrent < calculatePage(undefined, this.$data, this.$props);
  309. },
  310. getShowSizeChanger() {
  311. const {
  312. showSizeChanger,
  313. total,
  314. totalBoundaryShowSizeChanger
  315. } = this.$props;
  316. if (typeof showSizeChanger !== 'undefined') {
  317. return showSizeChanger;
  318. }
  319. return total > totalBoundaryShowSizeChanger;
  320. },
  321. runIfEnter(event, callback) {
  322. if (event.key === 'Enter' || event.charCode === 13) {
  323. event.preventDefault();
  324. for (var _len = arguments.length, restParams = new Array(_len > 2 ? _len - 2 : 0), _key = 2; _key < _len; _key++) {
  325. restParams[_key - 2] = arguments[_key];
  326. }
  327. callback(...restParams);
  328. }
  329. },
  330. runIfEnterPrev(event) {
  331. this.runIfEnter(event, this.prev);
  332. },
  333. runIfEnterNext(event) {
  334. this.runIfEnter(event, this.next);
  335. },
  336. runIfEnterJumpPrev(event) {
  337. this.runIfEnter(event, this.jumpPrev);
  338. },
  339. runIfEnterJumpNext(event) {
  340. this.runIfEnter(event, this.jumpNext);
  341. },
  342. handleGoTO(event) {
  343. if (event.keyCode === KEYCODE.ENTER || event.type === 'click') {
  344. this.handleChange(this.stateCurrentInputValue);
  345. }
  346. },
  347. renderPrev(prevPage) {
  348. const {
  349. itemRender
  350. } = this.$props;
  351. const prevButton = itemRender({
  352. page: prevPage,
  353. type: 'prev',
  354. originalElement: this.getItemIcon('prevIcon', 'prev page')
  355. });
  356. const disabled = !this.hasPrev();
  357. return isValidElement(prevButton) ? cloneElement(prevButton, disabled ? {
  358. disabled
  359. } : {}) : prevButton;
  360. },
  361. renderNext(nextPage) {
  362. const {
  363. itemRender
  364. } = this.$props;
  365. const nextButton = itemRender({
  366. page: nextPage,
  367. type: 'next',
  368. originalElement: this.getItemIcon('nextIcon', 'next page')
  369. });
  370. const disabled = !this.hasNext();
  371. return isValidElement(nextButton) ? cloneElement(nextButton, disabled ? {
  372. disabled
  373. } : {}) : nextButton;
  374. }
  375. },
  376. render() {
  377. const {
  378. prefixCls,
  379. disabled,
  380. hideOnSinglePage,
  381. total,
  382. locale,
  383. showQuickJumper,
  384. showLessItems,
  385. showTitle,
  386. showTotal,
  387. simple,
  388. itemRender,
  389. showPrevNextJumpers,
  390. jumpPrevIcon,
  391. jumpNextIcon,
  392. selectComponentClass,
  393. selectPrefixCls,
  394. pageSizeOptions
  395. } = this.$props;
  396. const {
  397. stateCurrent,
  398. statePageSize
  399. } = this;
  400. const _a = splitAttrs(this.$attrs).extraAttrs,
  401. {
  402. class: className
  403. } = _a,
  404. restAttrs = __rest(_a, ["class"]);
  405. // When hideOnSinglePage is true and there is only 1 page, hide the pager
  406. if (hideOnSinglePage === true && this.total <= statePageSize) {
  407. return null;
  408. }
  409. const allPages = calculatePage(undefined, this.$data, this.$props);
  410. const pagerList = [];
  411. let jumpPrev = null;
  412. let jumpNext = null;
  413. let firstPager = null;
  414. let lastPager = null;
  415. let gotoButton = null;
  416. const goButton = showQuickJumper && showQuickJumper.goButton;
  417. const pageBufferSize = showLessItems ? 1 : 2;
  418. const prevPage = stateCurrent - 1 > 0 ? stateCurrent - 1 : 0;
  419. const nextPage = stateCurrent + 1 < allPages ? stateCurrent + 1 : allPages;
  420. const hasPrev = this.hasPrev();
  421. const hasNext = this.hasNext();
  422. if (simple) {
  423. if (goButton) {
  424. if (typeof goButton === 'boolean') {
  425. gotoButton = _createVNode("button", {
  426. "type": "button",
  427. "onClick": this.handleGoTO,
  428. "onKeyup": this.handleGoTO
  429. }, [locale.jump_to_confirm]);
  430. } else {
  431. gotoButton = _createVNode("span", {
  432. "onClick": this.handleGoTO,
  433. "onKeyup": this.handleGoTO
  434. }, [goButton]);
  435. }
  436. const _gotoButton = function () {
  437. return gotoButton;
  438. }();
  439. gotoButton = _createVNode("li", {
  440. "title": showTitle ? `${locale.jump_to}${stateCurrent}/${allPages}` : null,
  441. "class": `${prefixCls}-simple-pager`
  442. }, [gotoButton]);
  443. }
  444. return _createVNode("ul", _objectSpread({
  445. "class": classNames(`${prefixCls} ${prefixCls}-simple`, {
  446. [`${prefixCls}-disabled`]: disabled
  447. }, className)
  448. }, restAttrs), [_createVNode("li", {
  449. "title": showTitle ? locale.prev_page : null,
  450. "onClick": this.prev,
  451. "tabindex": hasPrev ? 0 : null,
  452. "onKeypress": this.runIfEnterPrev,
  453. "class": classNames(`${prefixCls}-prev`, {
  454. [`${prefixCls}-disabled`]: !hasPrev
  455. }),
  456. "aria-disabled": !hasPrev
  457. }, [this.renderPrev(prevPage)]), _createVNode("li", {
  458. "title": showTitle ? `${stateCurrent}/${allPages}` : null,
  459. "class": `${prefixCls}-simple-pager`
  460. }, [_createVNode(BaseInput, {
  461. "type": "text",
  462. "value": this.stateCurrentInputValue,
  463. "disabled": disabled,
  464. "onKeydown": this.handleKeyDown,
  465. "onKeyup": this.handleKeyUp,
  466. "onInput": this.handleKeyUp,
  467. "onChange": this.handleKeyUp,
  468. "size": "3"
  469. }, null), _createVNode("span", {
  470. "class": `${prefixCls}-slash`
  471. }, [_createTextVNode("\uFF0F")]), allPages]), _createVNode("li", {
  472. "title": showTitle ? locale.next_page : null,
  473. "onClick": this.next,
  474. "tabindex": hasNext ? 0 : null,
  475. "onKeypress": this.runIfEnterNext,
  476. "class": classNames(`${prefixCls}-next`, {
  477. [`${prefixCls}-disabled`]: !hasNext
  478. }),
  479. "aria-disabled": !hasNext
  480. }, [this.renderNext(nextPage)]), gotoButton]);
  481. }
  482. if (allPages <= 3 + pageBufferSize * 2) {
  483. const pagerProps = {
  484. locale,
  485. rootPrefixCls: prefixCls,
  486. showTitle,
  487. itemRender,
  488. onClick: this.handleChange,
  489. onKeypress: this.runIfEnter
  490. };
  491. if (!allPages) {
  492. pagerList.push(_createVNode(Pager, _objectSpread(_objectSpread({}, pagerProps), {}, {
  493. "key": "noPager",
  494. "page": 1,
  495. "class": `${prefixCls}-item-disabled`
  496. }), null));
  497. }
  498. for (let i = 1; i <= allPages; i += 1) {
  499. const active = stateCurrent === i;
  500. pagerList.push(_createVNode(Pager, _objectSpread(_objectSpread({}, pagerProps), {}, {
  501. "key": i,
  502. "page": i,
  503. "active": active
  504. }), null));
  505. }
  506. } else {
  507. const prevItemTitle = showLessItems ? locale.prev_3 : locale.prev_5;
  508. const nextItemTitle = showLessItems ? locale.next_3 : locale.next_5;
  509. if (showPrevNextJumpers) {
  510. jumpPrev = _createVNode("li", {
  511. "title": this.showTitle ? prevItemTitle : null,
  512. "key": "prev",
  513. "onClick": this.jumpPrev,
  514. "tabindex": "0",
  515. "onKeypress": this.runIfEnterJumpPrev,
  516. "class": classNames(`${prefixCls}-jump-prev`, {
  517. [`${prefixCls}-jump-prev-custom-icon`]: !!jumpPrevIcon
  518. })
  519. }, [itemRender({
  520. page: this.getJumpPrevPage(),
  521. type: 'jump-prev',
  522. originalElement: this.getItemIcon('jumpPrevIcon', 'prev page')
  523. })]);
  524. jumpNext = _createVNode("li", {
  525. "title": this.showTitle ? nextItemTitle : null,
  526. "key": "next",
  527. "tabindex": "0",
  528. "onClick": this.jumpNext,
  529. "onKeypress": this.runIfEnterJumpNext,
  530. "class": classNames(`${prefixCls}-jump-next`, {
  531. [`${prefixCls}-jump-next-custom-icon`]: !!jumpNextIcon
  532. })
  533. }, [itemRender({
  534. page: this.getJumpNextPage(),
  535. type: 'jump-next',
  536. originalElement: this.getItemIcon('jumpNextIcon', 'next page')
  537. })]);
  538. }
  539. lastPager = _createVNode(Pager, {
  540. "locale": locale,
  541. "last": true,
  542. "rootPrefixCls": prefixCls,
  543. "onClick": this.handleChange,
  544. "onKeypress": this.runIfEnter,
  545. "key": allPages,
  546. "page": allPages,
  547. "active": false,
  548. "showTitle": showTitle,
  549. "itemRender": itemRender
  550. }, null);
  551. firstPager = _createVNode(Pager, {
  552. "locale": locale,
  553. "rootPrefixCls": prefixCls,
  554. "onClick": this.handleChange,
  555. "onKeypress": this.runIfEnter,
  556. "key": 1,
  557. "page": 1,
  558. "active": false,
  559. "showTitle": showTitle,
  560. "itemRender": itemRender
  561. }, null);
  562. let left = Math.max(1, stateCurrent - pageBufferSize);
  563. let right = Math.min(stateCurrent + pageBufferSize, allPages);
  564. if (stateCurrent - 1 <= pageBufferSize) {
  565. right = 1 + pageBufferSize * 2;
  566. }
  567. if (allPages - stateCurrent <= pageBufferSize) {
  568. left = allPages - pageBufferSize * 2;
  569. }
  570. for (let i = left; i <= right; i += 1) {
  571. const active = stateCurrent === i;
  572. pagerList.push(_createVNode(Pager, {
  573. "locale": locale,
  574. "rootPrefixCls": prefixCls,
  575. "onClick": this.handleChange,
  576. "onKeypress": this.runIfEnter,
  577. "key": i,
  578. "page": i,
  579. "active": active,
  580. "showTitle": showTitle,
  581. "itemRender": itemRender
  582. }, null));
  583. }
  584. if (stateCurrent - 1 >= pageBufferSize * 2 && stateCurrent !== 1 + 2) {
  585. pagerList[0] = _createVNode(Pager, {
  586. "locale": locale,
  587. "rootPrefixCls": prefixCls,
  588. "onClick": this.handleChange,
  589. "onKeypress": this.runIfEnter,
  590. "key": left,
  591. "page": left,
  592. "class": `${prefixCls}-item-after-jump-prev`,
  593. "active": false,
  594. "showTitle": this.showTitle,
  595. "itemRender": itemRender
  596. }, null);
  597. pagerList.unshift(jumpPrev);
  598. }
  599. if (allPages - stateCurrent >= pageBufferSize * 2 && stateCurrent !== allPages - 2) {
  600. pagerList[pagerList.length - 1] = _createVNode(Pager, {
  601. "locale": locale,
  602. "rootPrefixCls": prefixCls,
  603. "onClick": this.handleChange,
  604. "onKeypress": this.runIfEnter,
  605. "key": right,
  606. "page": right,
  607. "class": `${prefixCls}-item-before-jump-next`,
  608. "active": false,
  609. "showTitle": this.showTitle,
  610. "itemRender": itemRender
  611. }, null);
  612. pagerList.push(jumpNext);
  613. }
  614. if (left !== 1) {
  615. pagerList.unshift(firstPager);
  616. }
  617. if (right !== allPages) {
  618. pagerList.push(lastPager);
  619. }
  620. }
  621. let totalText = null;
  622. if (showTotal) {
  623. totalText = _createVNode("li", {
  624. "class": `${prefixCls}-total-text`
  625. }, [showTotal(total, [total === 0 ? 0 : (stateCurrent - 1) * statePageSize + 1, stateCurrent * statePageSize > total ? total : stateCurrent * statePageSize])]);
  626. }
  627. const prevDisabled = !hasPrev || !allPages;
  628. const nextDisabled = !hasNext || !allPages;
  629. const buildOptionText = this.buildOptionText || this.$slots.buildOptionText;
  630. return _createVNode("ul", _objectSpread(_objectSpread({
  631. "unselectable": "on",
  632. "ref": "paginationNode"
  633. }, restAttrs), {}, {
  634. "class": classNames({
  635. [`${prefixCls}`]: true,
  636. [`${prefixCls}-disabled`]: disabled
  637. }, className)
  638. }), [totalText, _createVNode("li", {
  639. "title": showTitle ? locale.prev_page : null,
  640. "onClick": this.prev,
  641. "tabindex": prevDisabled ? null : 0,
  642. "onKeypress": this.runIfEnterPrev,
  643. "class": classNames(`${prefixCls}-prev`, {
  644. [`${prefixCls}-disabled`]: prevDisabled
  645. }),
  646. "aria-disabled": prevDisabled
  647. }, [this.renderPrev(prevPage)]), pagerList, _createVNode("li", {
  648. "title": showTitle ? locale.next_page : null,
  649. "onClick": this.next,
  650. "tabindex": nextDisabled ? null : 0,
  651. "onKeypress": this.runIfEnterNext,
  652. "class": classNames(`${prefixCls}-next`, {
  653. [`${prefixCls}-disabled`]: nextDisabled
  654. }),
  655. "aria-disabled": nextDisabled
  656. }, [this.renderNext(nextPage)]), _createVNode(Options, {
  657. "disabled": disabled,
  658. "locale": locale,
  659. "rootPrefixCls": prefixCls,
  660. "selectComponentClass": selectComponentClass,
  661. "selectPrefixCls": selectPrefixCls,
  662. "changeSize": this.getShowSizeChanger() ? this.changePageSize : null,
  663. "current": stateCurrent,
  664. "pageSize": statePageSize,
  665. "pageSizeOptions": pageSizeOptions,
  666. "buildOptionText": buildOptionText || null,
  667. "quickGo": this.shouldDisplayQuickJumper() ? this.handleChange : null,
  668. "goButton": goButton
  669. }, null)]);
  670. }
  671. });