vue, 左右布局宽，可拖动改变

本文主要是介绍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, 左右布局宽，可拖动改变的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---