怎么在Vue项目中实现拖拽分割线自适应布局？

最近项目开发中遇到一个需求：页面左右布局，需要拖拽分割线，实现宽度自动适应。

解决方案

总体来说，就是在mounted生命周期，监听分割线DOM的onmousedown事件，在拖拽过程中动态计算，然后赋值改变左右DOM元素的宽度，这样就大功告成了。

template部分：class为"touch-div"就是分割线DOM。

<template>
  <div class="wrap">
    <div class="lf" ref="letfDom" style="width: 280px;">
      <router-link to="/moreClick">moreClick</router-link>
      <div class="touch-div" ref="moveDom">
        <span></span>
        <span></span>
      </div>
    </div>
    <div class="rt">
      <router-view />
    </div>
  </div>
</template>

CSS部分：cursor: col-resize;可以实现鼠标hover的时候成左右箭头状。

.wrap .lf .touch-div {
  position: absolute;
  top: 0;
  height: 100%;
  left: 100%;
  width: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: col-resize;
}

.wrap .lf .touch-div span {
  width: 2px;
  background: #bbb;
  margin: 0 2px;
  height: 15px;
}

JavaScript部分

export default {
  name: "App",
  data() {
    return {
      letfDom: null,
      clientStartX: 0
    };
  },
  mounted() {
    this.letfDom = this.$refs.letfDom;
    let moveDom = this.$refs.moveDom;

    moveDom.onmousedown = e => {
      this.clientStartX = e.clientX;
      e.preventDefault();

      document.onmousemove = e => {
        this.moveHandle(e.clientX, this.letfDom);
      };

      document.onmouseup = e => {
        document.onmouseup = null;
        document.onmousemove = null;
      };
    };
  },
  methods: {
    moveHandle(nowClientX, letfDom) {
      let computedX = nowClientX - this.clientStartX;
      let leftBoxWidth = parseInt(letfDom.style.width);
      let changeWidth = leftBoxWidth + computedX;

      if (changeWidth < 280) {
        changeWidth = 280;
      }

      if (changeWidth > 400) {
        changeWidth = 400;
      }

      letfDom.style.width = changeWidth + "px";

      this.clientStartX = nowClientX;
    }
  }
};

示例代码下载

可以复制以上代码运行查看使用效果，也可以到GitHub: https://github.com/Jackyyans/code123下载，更多示例将会持续更新，欢迎关注。