当鼠标在分割线位置按下时
triggerDragging变量变为true
这时split-pane-wrapper的mousemove中判断triggerDragging
如果为true则改变leftOffset，pane-left的width就会随之改变
pane-trigger-con的width是固定的
而pane-right采用了弹性布局的flex: 1;
使其填充剩余部分，填充部分适合用于网页的内容展示部分
<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>
