【Vue】Vue3 超简单拖拽条动态修改容器宽度

demo

代码

const leftBoxWidth = ref(200); // 默认宽度
const leftResize = (e: MouseEvent) => {
  document.onselectstart = function () {
    return false;
  }; //解决拖动会选中文字的问题
  const startX = e.clientX;
  const startWidth = leftBoxWidth.value;
  const mouseMove = (documentE: MouseEvent) => {
    // 80 是左侧菜单宽度
    leftBoxWidth.value = startWidth + documentE.clientX - startX - 80;
  };
  const mouseUp = () => {
    document.removeEventListener('mousemove', mouseMove);
    document.removeEventListener('mouseup', mouseUp);
  };
  document.addEventListener('mousemove', mouseMove);
  document.addEventListener('mouseup', mouseUp);
};

  .drag-bar {
    width: 10px;
    cursor: col-resize;
    z-index: 999;
    &:hover {
      background-color: $color;
    }
  }
      .drag-bar {
      position: absolute;
      top: 0;
      left: -5px;
      height: 100%;
    }