Vue 左右布局中拖拽容器边框实现自适应宽度

Vue 左右布局中拖拽容器边框实现自适应宽度

诉求：通过拖拽蓝色div有边框实现两侧宽度自适应

实现步骤

1. 规划好布局

• 借助flex布局实现一侧宽度固定，另一侧宽度自适应

// scss
.box {
	display: flex;
	height: 100%;
	.blue {
		width: 260px;
		height: 100%;
		min-width: 200px;
		position: relative;
		.x-resizer {
			position: absolute;
			top：0；
			right：0；
			z-index:1；
			width:4px;
			height: 100%;
			background: transparent;
			cursor：col-resize;
		}
	}
	.gray {
		min-width:35%
		flex: 1;
	}
}

• 定义一个拖拽的元素跟蓝色块的有边框吸附，宽度4px,高度和蓝色块一样高，吸附在蓝色块右侧，用于拖拽的目标元素

2. 拖拽事件响应

<template>
	<xxx-nav-bar class="blue" :style="{'width': `${lastX}px`}">
		<div class="x-resizer" @mousedown="mouseDownEvt"></div>
	</xxx-nav-bar>
	<xxx-content class="gray"/>
</template>
export default {
  data () {
    return {
      leftBarWidth: 260,
      startX: 0,
      lastX: 260
    }
  },
  methods: {
    mouseDown(e) {
      this.startX = e.clientX
      this.mouseMove(e)
      this.mouseUp()
      document.addEventListener('mousemove', this.mouseMove, true)
      document.addEventListener('mouseup', this.mouseUp, true)
    },
    mouseUp () {
      this.leftBarWidth = this.lastX
      document.removeEventListener('mousemove', this.mouseMove, true)
      document.removeEventListener('mouseup', this.mouseUp, true)
    },
    mouseMove (moveEvent) {
      moveEvent.preventDefault()
      moveEvent.stopPropagation()
      const offset = moveEvent.clientX - this.startX
      if (this.offset !== 0) {
        this.lastX = offset + this.leftBarWidth
      }
    }
  }
}

over