vue, 左右布局宽，可拖动改变

1：建立一个draggableMixin.js  混入的方式使用

2：代码如下draggableMixin.js 

export default {
  data() {
    return {
      leftWidth: 330,
      isDragging: false,
      startX: 0,
      startWidth: 0,
    };
  },
  methods: {
    startDragging(e) {
      this.isDragging = true;
      this.startX = e.clientX;
      this.startWidth = this.leftWidth;
      document.addEventListener('mousemove', this.onDragging);
      document.addEventListener('mouseup', this.stopDragging);
    },
    onDragging(e) {
      if (this.isDragging) {
        const offset = e.clientX - this.startX;
        this.leftWidth = this.startWidth + offset;
      }
    },
    stopDragging() {
      this.isDragging = false;
      document.removeEventListener('mousemove', this.onDragging);
      document.removeEventListener('mouseup', this.stopDragging);
    },
  },
};

/*

页面使用

import draggableMixin from '@/mixins/draggableMixin';

mixins: [draggableMixin],

//左

<div>

<div  :style="{ width: leftWidth + 'px',height:'800px' }">

      Left

</div>

//左右托拽的条条  样式可以自己改

<div class="resizer" @mousedown="startDragging"></div>

//右

<div  :style="{ width: 'calc(100% - ' + leftWidth + 'px - 5px)',height:'800px' }">

    Right

</div>
</div>

.resizer {

  width: 5px;

  background-color: #000;

  cursor: ew-resize;

}

高度想要自适应的话，把固定高度换成，

data(
return {
        height: document.documentElement.clientHeight - 标签栏的高,
}
)

**/