做pc端网站策划河南建网站 优帮云

实现左右或者上下div两部分拖动，宽度或者高度自动变化,实现流畅平滑的变化，还可以是实现拖动到一定宽度就不让拖动了，如果你不需要最小宽度，就直接去掉样式就行

这是页面。分左中右三部分，中间我是用来作为拖动的按钮，如果你不需要，你可以让外部content相对定位，center中间部分绝对定位。

我这边实现的左有都具有最小宽度，左右拖动，改变的宽度。
上下div拖动，自动变化高度同样可以以相同的原理来实现。

<div class="content"><div class="left" ref="refLeft"></div><div class="center"ref="refCenter"@mousedown.stop.prevent="startResize"></div><div class="right" ref="refRight"></div>
</div>

这是对应的样式，根据自身情况，可以自己调整样式实现相关功能

.content{height: 100%;width:100%display: flex;.left {flex: 1;height: 100%;min-width: 200px;width:600px}.resize {cursor: col-resize;//拖动鼠标样式height: 100%;width: 8px;}.right {width: calc(100% - 600px);min-width: calc(100% - 600px);height: 100%;}}

// 左右拖动这里的一个大概说明，就是把减少的div宽度，加到另一个div的宽度上去，就是现实一增一减；变量自己取data定义就行了，startResize(event) {this.startX = event.clientX;this.startWidth = this.$refs.refRight.offsetWidth;console.log(event.clientX,this.startWidth,'this.startWidth')this.isResizing = true;window.addEventListener('mousemove', this.doResize);window.addEventListener('mouseup', this.stopResize);},doResize(event) {if (this.isResizing) {console.log(event.clientX,'this.startWidth')const deltaX = -event.clientX + this.startX;this.$refs.refRight.style.width = this.startWidth + deltaX + 'px';}},stopResize() {this.isResizing = false;window.removeEventListener('mousemove', this.doResize);window.removeEventListener('mouseup', this.stopResize);},