vue 拖拽事件和展开收缩事件

html

   <div
        :style="`width:${menuWrapWidth}px;margin-left:${wrapMarginLeft}px`"
        class="work-right"
    >
    //收起展开
      <el-tooltip
          effect="dark"
          :content="siderBarVisible ? '收起' : '展开'"
          placement="bottom"
          :open-delay="500"
      >
        <i
            class="iconfont icon-zhedie toggle-panel-button"
            :class="siderBarVisible ? '' : 'back'"
            @click="toggleBoardVisible"
        ></i>
      </el-tooltip>
    //内容
     <div class="work-main-container"></div>
     //拖拽线条
     <div class="drag-right" @mousedown="dragdown( $event)" :class="onDraging?'onDraging':''">
     </div>
    </div>

js

<script>
export default {
  name: "workStation",
    data() {
    return {
    //左侧菜单容器宽度
      menuWrapWidth: 280,
      onDraging: false,
    }
        wrapMarginLeft() {//展开收缩
      if (this.siderBarVisible) {
        return 0
      } else {
        return -this.menuWrapWidth
      }
    },
  methods: {
     toggleBoardVisible() {
      this.siderBarVisible = !this.siderBarVisible;
    },

    dragmove(event) {
      event.preventDefault();
      event.stopPropagation();
      //最小宽度为280
      if (event.clientX < 280 || event.clientX > 480) return
      this.menuWrapWidth = event.clientX + 4

    },
    dragup(event) {
      event.preventDefault();
      event.stopPropagation();
      this.onDraging = false
      document.removeEventListener("mousemove", this.dragmove);
      document.removeEventListener("mouseup", this.dragup);
    },
    dragdown(event) {
      event.preventDefault();
      event.stopPropagation();

      if (event.buttons !== 1) {
        // 不是鼠标左键按下的则不执行一下操作
        return;
      }
      this.onDraging = true
      let element = event.currentTarget.parentElement;
      document.addEventListener("mousemove", this.dragmove, {
        passive: false,
      });
      document.addEventListener("mouseup", this.dragup, {
        passive: false,
      });
    },
  }
  }
</script>

css

<style lang="scss" scoped>
.work-right {
  //width: 280px;
  padding: 10px 12px 0;
  background-color: #fff;
  border-right: solid 1px var(--zgg-border-light);
  display: flex;
  flex-direction: column;
  position: relative;
  
  .toggle-panel-button {
    position: absolute;
    z-index: 999;
    right: -20px;
    top: 56px;
    //position: relative;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.25rem;
    transition: all 0.5s;

    &::after {
      content: "";
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
      //border: 1px solid rgba(240, 240, 240, 1);
      border: 1px solid var(--zgg-border-light);;
      border-radius: 50%;
      background-color: white;
      z-index: -1;
    }

    &:hover {
      color: #348fe4 !important;
      text-decoration: none;
      border-radius: 50%;
      cursor: pointer;
      //background: rgba(52,143,228,.1);
      border-color: rgba(52, 143, 228, 0.5);
    }
  }

  .toggle-panel-button.back {
    transform: rotate(180deg);
    right: -27px;

    &::after {
      content: "";
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
      //border: 1px solid rgba(240, 240, 240, 1);
      border: 1px solid var(--zgg-border-light);
      border-radius: 50%;
      border-top-right-radius: unset;
      border-bottom-right-radius: unset;
      background-color: white;
      z-index: -1;

      &:hover {
        background: rgba(52, 143, 228, 0.5);
      }
    }
  }
}
.drag-right {
  width: 8px;
  position: absolute;
  right: 0px;
  top: 0;
  bottom: 0;
  cursor: ew-resize;

  &:hover {
    border-right: solid 2px rgba(24, 144, 255, 0.6);
  }

  &.onDraging {
    border-right: solid 4px rgba(24, 144, 255, 0.6);
  }
}
</style>