Implementation is not difficult, but other articles online have really complicated simple things.
The method I'm teaching you today is super simple!!!! Only 50 lines of code!!
When the mouse is pressed at the divider position,
the triggerDragging variable becomes true.
At this point, in the mousemove of split-pane-wrapper, check triggerDragging.
If it is true, change leftOffset, and the width of pane-left will change accordingly.
The width of pane-trigger-con is fixed,
while pane-right uses a flexible layout with flex: 1;
to fill the remaining space, which is suitable for the content display part of the webpage.
<template>
<div class="split-pane-wrapper" @mousemove="mouseMoveTrigger">
<div class="pane-left" :style="{ width: leftOffset + 'px' }"></div>
<div class="pane-trigger-con" @mousedown="mouseDownTrigger"></div>
<div class="pane-right"></div>
</div>
</template>
<script>
export default {
name: "Home",
data() {
return {
leftOffset: 300,
triggerDragging: false,
};
},
methods: {
mouseMoveTrigger(event) {
if (!event.which) this.triggerDragging = false;
if (this.triggerDragging) {
this.leftOffset = event.clientX;
}
},
mouseDownTrigger(event) {
this.triggerDragging = true;
},
},
};
</script>
<style scoped>
.split-pane-wrapper {
width: 100%;
height: 100%;
display: flex;
flex-direction: row;
}
.pane-left {
background: brown;
}
.pane-right {
flex: 1;
background: chartreuse;
}
.pane-trigger-con {
width: 8px;
background: red;
cursor: ew-resize;
}
</style>
2022-8-24
Remember to follow⬇️