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

原创已于 2023-11-25 09:02:37 修改

· 1.2k 阅读

5 ·

版权

文章标签：

#vue.js #前端 #javascript

于 2023-11-20 14:15:28 首次发布

Vue.js 专栏收录该内容

56 篇文章

订阅专栏

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.onselectstart = function () {
      return true;
    };
  };
  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%;
    }