多切分面板組件，組合兩分割(WPanelDivideHorizontal、WPanelDivideVertical)與三分割(WPanelDivideHorizontalTriple、WPanelDivideVerticalTriple)四組件而成， 支援rows(1~3)列x cols(1~3)欄共9種佈局，先水平切為cols欄(外層)，各欄再各自垂直切為rows列(各欄比例獨立)， 各格內容以具名scoped slot(pane)帶出，pane帶出index(格序=row*cols+col)、row(列序)、col(欄序)、width(格寬px)、height(格高px)， 分隔條之呈現與拖曳行為皆由前述四組件提供，本組件僅負責組合與比例陣列之轉接
Props
| Name | Type | Default value | Required? | Description |
|---|---|---|---|---|
cols |
Number | 1 |
No | 輸入水平切分欄數整數，範圍為1~3，預設1 |
rows |
Number | 1 |
No | 輸入各欄垂直切分列數整數，範圍為1~3，預設1 |
layouts |
Array | null |
No | 輸入支援佈局清單陣列，元素為'rows:cols'字串(如'2:2')，rows與cols組合不在清單內時回退為1:1並提示錯誤，預設null表示支援全部9種 |
ratiosX |
Array | null |
No | 輸入直向分隔條(欄邊界)位置比例陣列，長度需為cols-1且為遞增於0~1之數字，無效時自動均分，預設null |
ratiosY |
Array | null |
No | 輸入橫向分隔條(列邊界)位置比例陣列之陣列，外層長度需為cols，各欄內層長度需為rows-1且為遞增於0~1之數字，無效時自動均分，預設null |
sectionWidthMin |
Number | null |
No | 輸入各欄最小寬度數字，單位為px，預設null |
sectionWidthMax |
Number | null |
No | 輸入各欄最大寬度數字，單位為px，預設null |
sectionHeightMin |
Number | null |
No | 輸入各格最小高度數字，單位為px，預設null |
sectionHeightMax |
Number | null |
No | 輸入各格最大高度數字，單位為px，預設null |
barColor |
String | '#ddd' |
No | 輸入分隔條顏色字串，預設'#ddd' |
barSize |
Number | 2 |
No | 輸入分隔條尺寸數字，為分隔條寬(高)度，單位為px，預設2 |
barBorderColor |
String | 'transparent' |
No | 輸入分隔條框線顏色字串，預設'transparent' |
barBorderSize |
Number | 3 |
No | 輸入分隔條框線寬度數字，單位為px，預設3，通常配合barBorderColor='transparent'使可拖曳區加大又不遮蔽可視區 |
Events
| Name | Payload Type | Description |
|---|---|---|
update:ratiosX |
拖曳直向分隔條時發射，帶出新的欄邊界比例陣列 | |
update:ratiosY |
拖曳橫向分隔條時發射，帶出新的列邊界比例陣列之陣列 | |
resize |
面板尺寸變更時發射，帶出domresize訊息物件 |
- Description:
多切分面板組件，組合兩分割(WPanelDivideHorizontal、WPanelDivideVertical)與三分割(WPanelDivideHorizontalTriple、WPanelDivideVerticalTriple)四組件而成， 支援rows(1~3)列x cols(1~3)欄共9種佈局，先水平切為cols欄(外層)，各欄再各自垂直切為rows列(各欄比例獨立)， 各格內容以具名scoped slot(pane)帶出，pane帶出index(格序=row*cols+col)、row(列序)、col(欄序)、width(格寬px)、height(格高px)， 分隔條之呈現與拖曳行為皆由前述四組件提供，本組件僅負責組合與比例陣列之轉接