版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/baidu_35407267/article/details/82527822
Angular原生的拖拽布局，无其他依赖。
demo
http://angular-splitter.guguji5.top
依赖
- angular 5-6
- angular-cli
如何启动
github仓库：https://github.com/guguji5/angular-splitter
git clone https://github.com/guguji5/angular-splitter.git
cd angular-splitter
npm install
ng serve --open
文档
Component <tam-splitter>
| @Input | Type | Default | Details |
|---|---|---|---|
| direction | string | “horizontal” | Select split direction: “horizontal” or “vertical”. |
| splitterBarWidth | number | 8 | Gutters’s size (dragging elements) in pixels. |
| useTransition | boolean or number | false | Use transition when collapsing or expanding. when this param is a number, it will be a millisecond value set to the property ‘transition-duration’, should be between 100 and 1000 |
| type | string | ‘standard’ | it has two value(standard, macNotes), which controls the behavior of the drag, macNotes type will act like the notes on mac |
| @Output | Param | Details |
|---|---|---|
| sizeChange | {barNum: number, sizes: Array<number>} |
Emit when draging, return the index of bar and the sizes of panels |
Component <tam-splitter-panel>
| @Input | Type | Default | Details |
|---|---|---|---|
| size | number | null | Size of the panel in percent (value between 0 and 100).all panels sizes should be equal to 100 |
| max | number | null | Max size of the panel in percent (value between 0 and 100). |
| min | number | null | Min size of the panel in percent (value between 0 and 100). |
| visible | boolean | true | Allow to toggle panel visibility |
| @Output | Param | Details |
|---|---|---|
| collapsedChange | {collapsed:boolean, sizes: Array<number>, collapsedComponentSize: number} |
Emit when collapsed or expand, return the collapsed, the sizes of panels and the size of collapsed panel |
simple demo:
<tam-splitter splitterBarWidth=3 [direction]="horizontal" (sizeChange)="sizeChange($event)">
<tam-splitter-panel [size]="20" [max]="30" [min]="10"
[visible]=true (collapsedChange)="collapsedChange($event)">
Refined By Panel
</tam-splitter-panel>
<tam-splitter-panel [size]="30" [max]="50" [min]="20">
Side List Panel
</tam-splitter-panel>
<tam-splitter-panel [size]="50" [max]="70" [min]="20">
Preview Panel
</tam-splitter-panel>
</tam-splitter>
nested demo:
<tam-splitter splitterBarWidth=3>
<tam-splitter-panel [size]="20" [max]="30" [min]="10" (collapsedChange)="collapsedChange($event)">
Refined By Panel
</tam-splitter-panel>
<tam-splitter-panel [size]="80">
<tam-splitter splitterBarWidth=3 [direction]="'vertical'">
<tam-splitter-panel [size]="30" [max]="40" [min]="20">
Side List Panel
</tam-splitter-panel>
<tam-splitter-panel [size]="70" [max]="80" [min]="60">
Preview Panel
</tam-splitter-panel>
</tam-splitter>
</tam-splitter-panel>
</tam-splitter>
写在后面的话：
splitter的需求很明确，但是远不止这么简单，PM的需要是拖拽，并且每一个panel都要有最大最小值的限制，而且，因为第三个区域是展示内容区域，所以希望，拖拽第一个框的时候，增大的是第三个而不是第二个。基于以上需求，google到了两个控件，kendo-ui-splitter 和 angular-split，kendo虽然有一些sizechange和collapsechange方法，但是还是无法实现当拖拽的时候，人为的改变第三个的宽度。而第二个无法支持最大最小值。
基于以上背景，只好自己来实现这样一个功能。具体实现是参考angular-split，只是在计算位置的时候增加了最大值和最小值的边界，然后有在sizechange事件是暴露出来每一个panel的宽度，基于此来给每一个panel动态计算和赋值。
很流行的一个布局，如上图2，当一个panel达到最小宽度时，会从另一个panel获取宽度。outlook，mac上的备忘录都是采用了这种中间panel宽度固定，右边为主要展示区域的形式。简单更新以后新增了type属性，只要把type设为macNotes，就会实现这种行为。