如何在vue中拖动改变侧边栏div的宽度

先贴html代码

<template>
  <div class="box-wrap">
  <div class="box" id="box"></div>
  <div class="drag-btn" id="dragBtn" @mousedown.stop.prevent="mouseDownLeft"></div>
  </div>
</template>
复制代码

样式

.box-wrap {
    position: relative;
    height: 100%;
}
.box {
    width: 200px;
    height: 100%;
    min-width: 150px;
}
.drag-btn {
    position: absolate;
    right: -4px;
    width: 4px;
    height: 100%;
    background: rgba(0, 186, 255, 0.3);
    z-index: 33;
}
复制代码

然后在mounted中监听

mounted() {
  document.documentElement.addEventListener('mousemove', this.mouse_move, true);
  document.documentElement.addEventListener('mouseup', this.mouse_up, true);
}
复制代码

data

data() {
    return {
      resizing: '', // 拉伸的标识符
      dw: 0, // 鼠标点击时记录需要拉长前的长或者宽
      dx: 0, // 鼠标点击时记录需要拉长前的屏幕距离宽或者高
   }
}
复制代码

开始在methods中写入方法

methods: {
   mouseDownLeft(ev) {
      const tagBox = document.getElementById('box');
      const iEvent = ev || event;
      this.dx = iEvent.clientX;
      this.dw = tagBox.offsetWidth;
      this.disright = tagBox.offsetLeft + tagBox.offsetWidth;
      if (iEvent.clientX > tagBox.offsetLeft + 10) {
        this.resizing = 'left';
      }
    },
    mouse_move(ev) {
      if (this.resizing === 'left') {
        const tagBox = document.getElementById('taglibDataBox');
        const iEvent = ev || event;
        tagBox.style.width = `${this.dw + (iEvent.clientX - this.dx)}px`;
        // dragBtn.style.left = `${this.dw + (iEvent.clientX - this.dx) - 4}px`;
        if (tagBox.offsetWidth <= 150) {
          tagBox.style.width = '150px';
        }
      }
}
复制代码

大部分引入项目中用的代码， 这些代码未经测试，仅供参考

转载于:https://juejin.im/post/5b74d719518825533f45e165