实现左右或者上下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);
},