DragHandle.js 4.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147
  1. import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
  2. import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
  3. import { createVNode as _createVNode } from "vue";
  4. import addEventListenerWrap from '../../vc-util/Dom/addEventListener';
  5. import raf from '../../_util/raf';
  6. import { defineComponent, onUnmounted, computed, ref, watchEffect, getCurrentInstance } from 'vue';
  7. import devWarning from '../../vc-util/devWarning';
  8. import { useInjectTableContext } from '../../table/context';
  9. import supportsPassive from '../../_util/supportsPassive';
  10. var events = {
  11. mouse: {
  12. start: 'mousedown',
  13. move: 'mousemove',
  14. stop: 'mouseup'
  15. },
  16. touch: {
  17. start: 'touchstart',
  18. move: 'touchmove',
  19. stop: 'touchend'
  20. }
  21. };
  22. var defaultMinWidth = 50;
  23. export default defineComponent({
  24. compatConfig: {
  25. MODE: 3
  26. },
  27. name: 'DragHandle',
  28. props: {
  29. prefixCls: String,
  30. width: {
  31. type: Number,
  32. required: true
  33. },
  34. minWidth: {
  35. type: Number,
  36. default: defaultMinWidth
  37. },
  38. maxWidth: {
  39. type: Number,
  40. default: Infinity
  41. },
  42. column: {
  43. type: Object,
  44. default: undefined
  45. }
  46. },
  47. setup: function setup(props) {
  48. var startX = 0;
  49. var moveEvent = {
  50. remove: function remove() {}
  51. };
  52. var stopEvent = {
  53. remove: function remove() {}
  54. };
  55. var removeEvents = function removeEvents() {
  56. moveEvent.remove();
  57. stopEvent.remove();
  58. };
  59. onUnmounted(function () {
  60. removeEvents();
  61. });
  62. watchEffect(function () {
  63. devWarning(!isNaN(props.width), 'Table', 'width must be a number when use resizable');
  64. });
  65. var _useInjectTableContex = useInjectTableContext(),
  66. onResizeColumn = _useInjectTableContex.onResizeColumn;
  67. var minWidth = computed(function () {
  68. return typeof props.minWidth === 'number' && !isNaN(props.minWidth) ? props.minWidth : defaultMinWidth;
  69. });
  70. var maxWidth = computed(function () {
  71. return typeof props.maxWidth === 'number' && !isNaN(props.maxWidth) ? props.maxWidth : Infinity;
  72. });
  73. var instance = getCurrentInstance();
  74. var baseWidth = 0;
  75. var dragging = ref(false);
  76. var rafId;
  77. var updateWidth = function updateWidth(e) {
  78. var pageX = 0;
  79. if (e.touches) {
  80. if (e.touches.length) {
  81. // touchmove
  82. pageX = e.touches[0].pageX;
  83. } else {
  84. // touchend
  85. pageX = e.changedTouches[0].pageX;
  86. }
  87. } else {
  88. pageX = e.pageX;
  89. }
  90. var tmpDeltaX = startX - pageX;
  91. var w = Math.max(baseWidth - tmpDeltaX, minWidth.value);
  92. w = Math.min(w, maxWidth.value);
  93. raf.cancel(rafId);
  94. rafId = raf(function () {
  95. onResizeColumn(w, props.column.__originColumn__);
  96. });
  97. };
  98. var handleMove = function handleMove(e) {
  99. updateWidth(e);
  100. };
  101. var handleStop = function handleStop(e) {
  102. dragging.value = false;
  103. updateWidth(e);
  104. removeEvents();
  105. };
  106. var handleStart = function handleStart(e, eventsFor) {
  107. dragging.value = true;
  108. removeEvents();
  109. baseWidth = instance.vnode.el.parentNode.getBoundingClientRect().width;
  110. if (e instanceof MouseEvent && e.which !== 1) {
  111. return;
  112. }
  113. if (e.stopPropagation) e.stopPropagation();
  114. startX = e.touches ? e.touches[0].pageX : e.pageX;
  115. moveEvent = addEventListenerWrap(document.documentElement, eventsFor.move, handleMove);
  116. stopEvent = addEventListenerWrap(document.documentElement, eventsFor.stop, handleStop);
  117. };
  118. var handleDown = function handleDown(e) {
  119. e.stopPropagation();
  120. e.preventDefault();
  121. handleStart(e, events.mouse);
  122. };
  123. var handleTouchDown = function handleTouchDown(e) {
  124. e.stopPropagation();
  125. e.preventDefault();
  126. handleStart(e, events.touch);
  127. };
  128. var handleClick = function handleClick(e) {
  129. e.stopPropagation();
  130. e.preventDefault();
  131. };
  132. return function () {
  133. var prefixCls = props.prefixCls;
  134. var touchEvents = _defineProperty({}, supportsPassive ? 'onTouchstartPassive' : 'onTouchstart', function (e) {
  135. return handleTouchDown(e);
  136. });
  137. return _createVNode("div", _objectSpread(_objectSpread({
  138. "class": "".concat(prefixCls, "-resize-handle ").concat(dragging.value ? 'dragging' : ''),
  139. "onMousedown": handleDown
  140. }, touchEvents), {}, {
  141. "onClick": handleClick
  142. }), [_createVNode("div", {
  143. "class": "".concat(prefixCls, "-resize-handle-line")
  144. }, null)]);
  145. };
  146. }
  147. });