Options.js 4.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157
  1. import { createVNode as _createVNode } from "vue";
  2. import PropTypes from '../_util/vue-types';
  3. import KEYCODE from './KeyCode';
  4. import { computed, defineComponent, ref } from 'vue';
  5. import BaseInput from '../_util/BaseInput';
  6. export default defineComponent({
  7. compatConfig: {
  8. MODE: 3
  9. },
  10. props: {
  11. disabled: {
  12. type: Boolean,
  13. default: undefined
  14. },
  15. changeSize: Function,
  16. quickGo: Function,
  17. selectComponentClass: PropTypes.any,
  18. current: Number,
  19. pageSizeOptions: PropTypes.array.def(['10', '20', '50', '100']),
  20. pageSize: Number,
  21. buildOptionText: Function,
  22. locale: PropTypes.object,
  23. rootPrefixCls: String,
  24. selectPrefixCls: String,
  25. goButton: PropTypes.any
  26. },
  27. setup(props) {
  28. const goInputText = ref('');
  29. const validValue = computed(() => {
  30. return !goInputText.value || isNaN(goInputText.value) ? undefined : Number(goInputText.value);
  31. });
  32. const defaultBuildOptionText = opt => {
  33. return `${opt.value} ${props.locale.items_per_page}`;
  34. };
  35. const handleChange = e => {
  36. const {
  37. value
  38. } = e.target;
  39. if (goInputText.value === value) return;
  40. goInputText.value = value;
  41. };
  42. const handleBlur = e => {
  43. const {
  44. goButton,
  45. quickGo,
  46. rootPrefixCls
  47. } = props;
  48. if (goButton || goInputText.value === '') {
  49. return;
  50. }
  51. if (e.relatedTarget && (e.relatedTarget.className.indexOf(`${rootPrefixCls}-item-link`) >= 0 || e.relatedTarget.className.indexOf(`${rootPrefixCls}-item`) >= 0)) {
  52. goInputText.value = '';
  53. return;
  54. } else {
  55. quickGo(validValue.value);
  56. goInputText.value = '';
  57. }
  58. };
  59. const go = e => {
  60. if (goInputText.value === '') {
  61. return;
  62. }
  63. if (e.keyCode === KEYCODE.ENTER || e.type === 'click') {
  64. // https://github.com/vueComponent/ant-design-vue/issues/1316
  65. props.quickGo(validValue.value);
  66. goInputText.value = '';
  67. }
  68. };
  69. const pageSizeOptions = computed(() => {
  70. const {
  71. pageSize,
  72. pageSizeOptions
  73. } = props;
  74. if (pageSizeOptions.some(option => option.toString() === pageSize.toString())) {
  75. return pageSizeOptions;
  76. }
  77. return pageSizeOptions.concat([pageSize.toString()]).sort((a, b) => {
  78. // eslint-disable-next-line no-restricted-globals
  79. const numberA = isNaN(Number(a)) ? 0 : Number(a);
  80. // eslint-disable-next-line no-restricted-globals
  81. const numberB = isNaN(Number(b)) ? 0 : Number(b);
  82. return numberA - numberB;
  83. });
  84. });
  85. return () => {
  86. const {
  87. rootPrefixCls,
  88. locale,
  89. changeSize,
  90. quickGo,
  91. goButton,
  92. selectComponentClass: Select,
  93. selectPrefixCls,
  94. pageSize,
  95. disabled
  96. } = props;
  97. const prefixCls = `${rootPrefixCls}-options`;
  98. let changeSelect = null;
  99. let goInput = null;
  100. let gotoButton = null;
  101. if (!changeSize && !quickGo) {
  102. return null;
  103. }
  104. if (changeSize && Select) {
  105. const buildOptionText = props.buildOptionText || defaultBuildOptionText;
  106. const options = pageSizeOptions.value.map((opt, i) => _createVNode(Select.Option, {
  107. "key": i,
  108. "value": opt
  109. }, {
  110. default: () => [buildOptionText({
  111. value: opt
  112. })]
  113. }));
  114. changeSelect = _createVNode(Select, {
  115. "disabled": disabled,
  116. "prefixCls": selectPrefixCls,
  117. "showSearch": false,
  118. "class": `${prefixCls}-size-changer`,
  119. "optionLabelProp": "children",
  120. "value": (pageSize || pageSizeOptions.value[0]).toString(),
  121. "onChange": value => changeSize(Number(value)),
  122. "getPopupContainer": triggerNode => triggerNode.parentNode
  123. }, {
  124. default: () => [options]
  125. });
  126. }
  127. if (quickGo) {
  128. if (goButton) {
  129. gotoButton = typeof goButton === 'boolean' ? _createVNode("button", {
  130. "type": "button",
  131. "onClick": go,
  132. "onKeyup": go,
  133. "disabled": disabled,
  134. "class": `${prefixCls}-quick-jumper-button`
  135. }, [locale.jump_to_confirm]) : _createVNode("span", {
  136. "onClick": go,
  137. "onKeyup": go
  138. }, [goButton]);
  139. }
  140. goInput = _createVNode("div", {
  141. "class": `${prefixCls}-quick-jumper`
  142. }, [locale.jump_to, _createVNode(BaseInput, {
  143. "disabled": disabled,
  144. "type": "text",
  145. "value": goInputText.value,
  146. "onInput": handleChange,
  147. "onChange": handleChange,
  148. "onKeyup": go,
  149. "onBlur": handleBlur
  150. }, null), locale.page, gotoButton]);
  151. }
  152. return _createVNode("li", {
  153. "class": `${prefixCls}`
  154. }, [changeSelect, goInput]);
  155. };
  156. }
  157. });