本文主要是介绍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 - 标签栏的高,
}
)
**/
这篇关于vue, 左右布局宽,可拖动改变的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!