本文主要是介绍vue页面实现左右div宽度，上下div高度分割线手动拖动高度或者宽度自动变化，两个div宽度或者高度拉伸调节，实现左右可拖动改变宽度的div内容显示区，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
实现左右或者上下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);},
这篇关于vue页面实现左右div宽度，上下div高度分割线手动拖动高度或者宽度自动变化，两个div宽度或者高度拉伸调节，实现左右可拖动改变宽度的div内容显示区的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
