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 - 标签栏的高,
}
)
**/