阅读量:143

实现并不难,但是网上其他的文章实在是把简单的事情复杂化了
今天教大家的方法超级简洁!!!!只用50行代码!!
当鼠标在分割线位置按下时
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>
2022-8-24
记得关注⬇️