e4086c1c1de26a6e9e283c0e6a951ac69f61df8ec18fa645d5a4c38e657e65316ef778951c0266530a96f07b3b7c7c42a29965dad434d8268e33442b70eb51 5.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152
  1. import { shallowRef, ref, computed, nextTick } from 'vue';
  2. import { useFormItem } from '../../../form/src/hooks/use-form-item.mjs';
  3. import { UPDATE_MODEL_EVENT, INPUT_EVENT, CHANGE_EVENT } from '../../../../constants/event.mjs';
  4. const useSlide = (props, initData, emit) => {
  5. const { form: elForm, formItem: elFormItem } = useFormItem();
  6. const slider = shallowRef();
  7. const firstButton = ref();
  8. const secondButton = ref();
  9. const buttonRefs = {
  10. firstButton,
  11. secondButton
  12. };
  13. const sliderDisabled = computed(() => {
  14. return props.disabled || (elForm == null ? void 0 : elForm.disabled) || false;
  15. });
  16. const minValue = computed(() => {
  17. return Math.min(initData.firstValue, initData.secondValue);
  18. });
  19. const maxValue = computed(() => {
  20. return Math.max(initData.firstValue, initData.secondValue);
  21. });
  22. const barSize = computed(() => {
  23. return props.range ? `${100 * (maxValue.value - minValue.value) / (props.max - props.min)}%` : `${100 * (initData.firstValue - props.min) / (props.max - props.min)}%`;
  24. });
  25. const barStart = computed(() => {
  26. return props.range ? `${100 * (minValue.value - props.min) / (props.max - props.min)}%` : "0%";
  27. });
  28. const runwayStyle = computed(() => {
  29. return props.vertical ? { height: props.height } : {};
  30. });
  31. const barStyle = computed(() => {
  32. return props.vertical ? {
  33. height: barSize.value,
  34. bottom: barStart.value
  35. } : {
  36. width: barSize.value,
  37. left: barStart.value
  38. };
  39. });
  40. const resetSize = () => {
  41. if (slider.value) {
  42. const rect = slider.value.getBoundingClientRect();
  43. initData.sliderSize = rect[props.vertical ? "height" : "width"];
  44. }
  45. };
  46. const getButtonRefByPercent = (percent) => {
  47. const targetValue = props.min + percent * (props.max - props.min) / 100;
  48. if (!props.range) {
  49. return firstButton;
  50. }
  51. let buttonRefName;
  52. if (Math.abs(minValue.value - targetValue) < Math.abs(maxValue.value - targetValue)) {
  53. buttonRefName = initData.firstValue < initData.secondValue ? "firstButton" : "secondButton";
  54. } else {
  55. buttonRefName = initData.firstValue > initData.secondValue ? "firstButton" : "secondButton";
  56. }
  57. return buttonRefs[buttonRefName];
  58. };
  59. const setPosition = (percent) => {
  60. const buttonRef = getButtonRefByPercent(percent);
  61. buttonRef.value.setPosition(percent);
  62. return buttonRef;
  63. };
  64. const setFirstValue = (firstValue) => {
  65. initData.firstValue = firstValue != null ? firstValue : props.min;
  66. _emit(props.range ? [minValue.value, maxValue.value] : firstValue != null ? firstValue : props.min);
  67. };
  68. const setSecondValue = (secondValue) => {
  69. initData.secondValue = secondValue;
  70. if (props.range) {
  71. _emit([minValue.value, maxValue.value]);
  72. }
  73. };
  74. const _emit = (val) => {
  75. emit(UPDATE_MODEL_EVENT, val);
  76. emit(INPUT_EVENT, val);
  77. };
  78. const emitChange = async () => {
  79. await nextTick();
  80. emit(CHANGE_EVENT, props.range ? [minValue.value, maxValue.value] : props.modelValue);
  81. };
  82. const handleSliderPointerEvent = (event) => {
  83. var _a, _b, _c, _d, _e, _f;
  84. if (sliderDisabled.value || initData.dragging)
  85. return;
  86. resetSize();
  87. let newPercent = 0;
  88. if (props.vertical) {
  89. const clientY = (_c = (_b = (_a = event.touches) == null ? void 0 : _a.item(0)) == null ? void 0 : _b.clientY) != null ? _c : event.clientY;
  90. const sliderOffsetBottom = slider.value.getBoundingClientRect().bottom;
  91. newPercent = (sliderOffsetBottom - clientY) / initData.sliderSize * 100;
  92. } else {
  93. const clientX = (_f = (_e = (_d = event.touches) == null ? void 0 : _d.item(0)) == null ? void 0 : _e.clientX) != null ? _f : event.clientX;
  94. const sliderOffsetLeft = slider.value.getBoundingClientRect().left;
  95. newPercent = (clientX - sliderOffsetLeft) / initData.sliderSize * 100;
  96. }
  97. if (newPercent < 0 || newPercent > 100)
  98. return;
  99. return setPosition(newPercent);
  100. };
  101. const onSliderWrapperPrevent = (event) => {
  102. var _a, _b;
  103. if (((_a = buttonRefs["firstButton"].value) == null ? void 0 : _a.dragging) || ((_b = buttonRefs["secondButton"].value) == null ? void 0 : _b.dragging)) {
  104. event.preventDefault();
  105. }
  106. };
  107. const onSliderDown = async (event) => {
  108. const buttonRef = handleSliderPointerEvent(event);
  109. if (buttonRef) {
  110. await nextTick();
  111. buttonRef.value.onButtonDown(event);
  112. }
  113. };
  114. const onSliderClick = (event) => {
  115. const buttonRef = handleSliderPointerEvent(event);
  116. if (buttonRef) {
  117. emitChange();
  118. }
  119. };
  120. const onSliderMarkerDown = (position) => {
  121. if (sliderDisabled.value || initData.dragging)
  122. return;
  123. const buttonRef = setPosition(position);
  124. if (buttonRef) {
  125. emitChange();
  126. }
  127. };
  128. return {
  129. elFormItem,
  130. slider,
  131. firstButton,
  132. secondButton,
  133. sliderDisabled,
  134. minValue,
  135. maxValue,
  136. runwayStyle,
  137. barStyle,
  138. resetSize,
  139. setPosition,
  140. emitChange,
  141. onSliderWrapperPrevent,
  142. onSliderClick,
  143. onSliderDown,
  144. onSliderMarkerDown,
  145. setFirstValue,
  146. setSecondValue
  147. };
  148. };
  149. export { useSlide };
  150. //# sourceMappingURL=use-slide.mjs.map