50行代码用Vue实现可拖拽调节的分割布局

avatar
作者
筋斗云
阅读量: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
记得关注⬇️