BaseInput.js 4.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158
  1. import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
  2. import { 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 { computed, defineComponent, shallowRef, ref, watch } from 'vue';
  12. import PropTypes from './vue-types';
  13. import BaseInputInner from './BaseInputInner';
  14. import { styleObjectToString } from '../vc-util/Dom/css';
  15. const BaseInput = defineComponent({
  16. compatConfig: {
  17. MODE: 3
  18. },
  19. inheritAttrs: false,
  20. props: {
  21. disabled: PropTypes.looseBool,
  22. type: PropTypes.string,
  23. value: PropTypes.any,
  24. lazy: PropTypes.bool.def(true),
  25. tag: {
  26. type: String,
  27. default: 'input'
  28. },
  29. size: PropTypes.string,
  30. style: PropTypes.oneOfType([String, Object]),
  31. class: PropTypes.string
  32. },
  33. emits: ['change', 'input', 'blur', 'keydown', 'focus', 'compositionstart', 'compositionend', 'keyup', 'paste', 'mousedown'],
  34. setup(props, _ref) {
  35. let {
  36. emit,
  37. attrs,
  38. expose
  39. } = _ref;
  40. const inputRef = shallowRef(null);
  41. const renderValue = ref();
  42. const isComposing = ref(false);
  43. watch([() => props.value, isComposing], () => {
  44. if (isComposing.value) return;
  45. renderValue.value = props.value;
  46. }, {
  47. immediate: true
  48. });
  49. const handleChange = e => {
  50. emit('change', e);
  51. };
  52. const onCompositionstart = e => {
  53. isComposing.value = true;
  54. e.target.composing = true;
  55. emit('compositionstart', e);
  56. };
  57. const onCompositionend = e => {
  58. isComposing.value = false;
  59. e.target.composing = false;
  60. emit('compositionend', e);
  61. const event = document.createEvent('HTMLEvents');
  62. event.initEvent('input', true, true);
  63. e.target.dispatchEvent(event);
  64. handleChange(e);
  65. };
  66. const handleInput = e => {
  67. if (isComposing.value && props.lazy) {
  68. renderValue.value = e.target.value;
  69. return;
  70. }
  71. emit('input', e);
  72. };
  73. const handleBlur = e => {
  74. emit('blur', e);
  75. };
  76. const handleFocus = e => {
  77. emit('focus', e);
  78. };
  79. const focus = () => {
  80. if (inputRef.value) {
  81. inputRef.value.focus();
  82. }
  83. };
  84. const blur = () => {
  85. if (inputRef.value) {
  86. inputRef.value.blur();
  87. }
  88. };
  89. const handleKeyDown = e => {
  90. emit('keydown', e);
  91. };
  92. const handleKeyUp = e => {
  93. emit('keyup', e);
  94. };
  95. const setSelectionRange = (start, end, direction) => {
  96. var _a;
  97. (_a = inputRef.value) === null || _a === void 0 ? void 0 : _a.setSelectionRange(start, end, direction);
  98. };
  99. const select = () => {
  100. var _a;
  101. (_a = inputRef.value) === null || _a === void 0 ? void 0 : _a.select();
  102. };
  103. expose({
  104. focus,
  105. blur,
  106. input: computed(() => {
  107. var _a;
  108. return (_a = inputRef.value) === null || _a === void 0 ? void 0 : _a.input;
  109. }),
  110. setSelectionRange,
  111. select,
  112. getSelectionStart: () => {
  113. var _a;
  114. return (_a = inputRef.value) === null || _a === void 0 ? void 0 : _a.getSelectionStart();
  115. },
  116. getSelectionEnd: () => {
  117. var _a;
  118. return (_a = inputRef.value) === null || _a === void 0 ? void 0 : _a.getSelectionEnd();
  119. },
  120. getScrollTop: () => {
  121. var _a;
  122. return (_a = inputRef.value) === null || _a === void 0 ? void 0 : _a.getScrollTop();
  123. }
  124. });
  125. const handleMousedown = e => {
  126. emit('mousedown', e);
  127. };
  128. const handlePaste = e => {
  129. emit('paste', e);
  130. };
  131. const styleString = computed(() => {
  132. return props.style && typeof props.style !== 'string' ? styleObjectToString(props.style) : props.style;
  133. });
  134. return () => {
  135. const {
  136. style,
  137. lazy
  138. } = props,
  139. restProps = __rest(props, ["style", "lazy"]);
  140. return _createVNode(BaseInputInner, _objectSpread(_objectSpread(_objectSpread({}, restProps), attrs), {}, {
  141. "style": styleString.value,
  142. "onInput": handleInput,
  143. "onChange": handleChange,
  144. "onBlur": handleBlur,
  145. "onFocus": handleFocus,
  146. "ref": inputRef,
  147. "value": renderValue.value,
  148. "onCompositionstart": onCompositionstart,
  149. "onCompositionend": onCompositionend,
  150. "onKeyup": handleKeyUp,
  151. "onKeydown": handleKeyDown,
  152. "onPaste": handlePaste,
  153. "onMousedown": handleMousedown
  154. }), null);
  155. };
  156. }
  157. });
  158. export default BaseInput;