Search.js 5.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163
  1. import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
  2. import _extends from "@babel/runtime/helpers/esm/extends";
  3. import { resolveDirective as _resolveDirective, createVNode as _createVNode } from "vue";
  4. var __rest = this && this.__rest || function (s, e) {
  5. var t = {};
  6. for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
  7. if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
  8. if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
  9. }
  10. return t;
  11. };
  12. import { computed, shallowRef, defineComponent } from 'vue';
  13. import classNames from '../_util/classNames';
  14. import Input from './Input';
  15. import SearchOutlined from "@ant-design/icons-vue/es/icons/SearchOutlined";
  16. import Button from '../button';
  17. import { cloneElement } from '../_util/vnode';
  18. import PropTypes from '../_util/vue-types';
  19. import isPlainObject from 'lodash-es/isPlainObject';
  20. import useConfigInject from '../config-provider/hooks/useConfigInject';
  21. import omit from '../_util/omit';
  22. import inputProps from './inputProps';
  23. export default defineComponent({
  24. compatConfig: {
  25. MODE: 3
  26. },
  27. name: 'AInputSearch',
  28. inheritAttrs: false,
  29. props: _extends(_extends({}, inputProps()), {
  30. inputPrefixCls: String,
  31. // 不能设置默认值 https://github.com/vueComponent/ant-design-vue/issues/1916
  32. enterButton: PropTypes.any,
  33. onSearch: {
  34. type: Function
  35. }
  36. }),
  37. setup(props, _ref) {
  38. let {
  39. slots,
  40. attrs,
  41. expose,
  42. emit
  43. } = _ref;
  44. const inputRef = shallowRef();
  45. const composedRef = shallowRef(false);
  46. const focus = () => {
  47. var _a;
  48. (_a = inputRef.value) === null || _a === void 0 ? void 0 : _a.focus();
  49. };
  50. const blur = () => {
  51. var _a;
  52. (_a = inputRef.value) === null || _a === void 0 ? void 0 : _a.blur();
  53. };
  54. expose({
  55. focus,
  56. blur
  57. });
  58. const onChange = e => {
  59. emit('update:value', e.target.value);
  60. if (e && e.target && e.type === 'click') {
  61. emit('search', e.target.value, e);
  62. }
  63. emit('change', e);
  64. };
  65. const onMousedown = e => {
  66. var _a;
  67. if (document.activeElement === ((_a = inputRef.value) === null || _a === void 0 ? void 0 : _a.input)) {
  68. e.preventDefault();
  69. }
  70. };
  71. const onSearch = e => {
  72. var _a, _b;
  73. emit('search', (_b = (_a = inputRef.value) === null || _a === void 0 ? void 0 : _a.input) === null || _b === void 0 ? void 0 : _b.stateValue, e);
  74. };
  75. const onPressEnter = e => {
  76. if (composedRef.value || props.loading) {
  77. return;
  78. }
  79. onSearch(e);
  80. };
  81. const handleOnCompositionStart = e => {
  82. composedRef.value = true;
  83. emit('compositionstart', e);
  84. };
  85. const handleOnCompositionEnd = e => {
  86. composedRef.value = false;
  87. emit('compositionend', e);
  88. };
  89. const {
  90. prefixCls,
  91. getPrefixCls,
  92. direction,
  93. size
  94. } = useConfigInject('input-search', props);
  95. const inputPrefixCls = computed(() => getPrefixCls('input', props.inputPrefixCls));
  96. return () => {
  97. var _a, _b, _c, _d;
  98. const {
  99. disabled,
  100. loading,
  101. addonAfter = (_a = slots.addonAfter) === null || _a === void 0 ? void 0 : _a.call(slots),
  102. suffix = (_b = slots.suffix) === null || _b === void 0 ? void 0 : _b.call(slots)
  103. } = props,
  104. restProps = __rest(props, ["disabled", "loading", "addonAfter", "suffix"]);
  105. let {
  106. enterButton = (_d = (_c = slots.enterButton) === null || _c === void 0 ? void 0 : _c.call(slots)) !== null && _d !== void 0 ? _d : false
  107. } = props;
  108. enterButton = enterButton || enterButton === '';
  109. const searchIcon = typeof enterButton === 'boolean' ? _createVNode(SearchOutlined, null, null) : null;
  110. const btnClassName = `${prefixCls.value}-button`;
  111. const enterButtonAsElement = Array.isArray(enterButton) ? enterButton[0] : enterButton;
  112. let button;
  113. const isAntdButton = enterButtonAsElement.type && isPlainObject(enterButtonAsElement.type) && enterButtonAsElement.type.__ANT_BUTTON;
  114. if (isAntdButton || enterButtonAsElement.tagName === 'button') {
  115. button = cloneElement(enterButtonAsElement, _extends({
  116. onMousedown,
  117. onClick: onSearch,
  118. key: 'enterButton'
  119. }, isAntdButton ? {
  120. class: btnClassName,
  121. size: size.value
  122. } : {}), false);
  123. } else {
  124. const iconOnly = searchIcon && !enterButton;
  125. button = _createVNode(Button, {
  126. "class": btnClassName,
  127. "type": enterButton ? 'primary' : undefined,
  128. "size": size.value,
  129. "disabled": disabled,
  130. "key": "enterButton",
  131. "onMousedown": onMousedown,
  132. "onClick": onSearch,
  133. "loading": loading,
  134. "icon": iconOnly ? searchIcon : null
  135. }, {
  136. default: () => [iconOnly ? null : searchIcon || enterButton]
  137. });
  138. }
  139. if (addonAfter) {
  140. button = [button, addonAfter];
  141. }
  142. const cls = classNames(prefixCls.value, {
  143. [`${prefixCls.value}-rtl`]: direction.value === 'rtl',
  144. [`${prefixCls.value}-${size.value}`]: !!size.value,
  145. [`${prefixCls.value}-with-button`]: !!enterButton
  146. }, attrs.class);
  147. return _createVNode(Input, _objectSpread(_objectSpread(_objectSpread({
  148. "ref": inputRef
  149. }, omit(restProps, ['onUpdate:value', 'onSearch', 'enterButton'])), attrs), {}, {
  150. "onPressEnter": onPressEnter,
  151. "onCompositionstart": handleOnCompositionStart,
  152. "onCompositionend": handleOnCompositionEnd,
  153. "size": size.value,
  154. "prefixCls": inputPrefixCls.value,
  155. "addonAfter": button,
  156. "suffix": suffix,
  157. "onChange": onChange,
  158. "class": cls,
  159. "disabled": disabled
  160. }), slots);
  161. };
  162. }
  163. });