krd-srm-vue/src/utils/resizable.js

// v-resizable.js
export default {
  bind() {
    const minWidth = 400; // 设置表格最小宽度
    const minHeight = 200; // 设置表格最小高度
    let startX, startY, startWidth, startHeight;

    // 创建用于拖拽的右下角拖动柄
    const resizeHandle = document.createElement('div');
    resizeHandle.style.width = '10px';
    resizeHandle.style.height = '10px';
    // resizeHandle.style.background = 'rgba(0, 0, 0, 0.5)';
    resizeHandle.style.position = 'absolute';
    resizeHandle.style.right = '0';
    resizeHandle.style.bottom = '0';
    resizeHandle.style.cursor = 'se-resize';
    el.appendChild(resizeHandle);

    // 处理鼠标按下事件
    resizeHandle.addEventListener('mousedown', function (e) {
      startX = e.clientX;
      startY = e.clientY;
      startWidth = parseInt(document.defaultView.getComputedStyle(el).width, 10);
      startHeight = parseInt(document.defaultView.getComputedStyle(el).height, 10);
      document.documentElement.addEventListener('mousemove', onMouseMove, false);
      document.documentElement.addEventListener('mouseup', onMouseUp, false);
    });

    // 处理鼠标移动事件
    function onMouseMove(e) {
      const width = startWidth + e.clientX - startX;
      const height = startHeight + e.clientY - startY;
      el.style.width = Math.max(minWidth, width) + 'px';
      el.style.height = Math.max(minHeight, height) + 'px';
    }

    // 处理鼠标松开事件
    function onMouseUp() {
      document.documentElement.removeEventListener('mousemove', onMouseMove, false);
      document.documentElement.removeEventListener('mouseup', onMouseUp, false);
    }
  }
};