java分割面板_Split 面板分割
Split 面板分割
概述
可將一片區域，分割為可以拖拽調整寬度或高度的兩部分區域。
代碼示例
Left Pane
Right Pane
export default {
data () {
return {
split1: 0.5
}
},
}
.demo-split{
height: 200px;
border: 1px solid #dcdee2;
}
.demo-split-pane{
padding: 10px;
}
Top Pane
Bottom Pane
export default {
data () {
return {
split2: 0.5
}
},
}
.demo-split{
height: 200px;
border: 1px solid #dcdee2;
}
.demo-split-pane{
padding: 10px;
}
Top Pane
Bottom Pane
Right Pane
export default {
data () {
return {
split3: 0.5,
split4: 0.5
}
},
}
.demo-split{
height: 200px;
border: 1px solid #dcdee2;
}
.demo-split-pane{
padding: 10px;
}
.demo-split-pane.no-padding{
height: 200px;
padding: 0;
}
API
Split props
屬性
說明
類型
默認值
value
面板位置，可以是 0~1 代表百分比，或具體數值的像素，可用 v-model 雙向綁定
Number | String
0.5
mode
類型，可選值為 horizontal 或 vertical
String
horizontal
min
最小閾值
Number | String
40px
max
最大閾值
Number | String
40px
Split events
事件名
說明
返回值
on-move-start
拖拽開始
-
on-moving
拖拽中
event
on-move-end
拖拽結束
-
Split slot
名稱
說明
left
mode 為 horizontal 時可用，左邊面板
right
mode 為 horizontal 時可用，右邊面板
top
mode 為 vertical 時可用，上邊面板
bottom
mode 為 vertical 時可用，下邊面板
trigger
自定義分割拖拽節點
總結
以上是生活随笔為你收集整理的java分割面板_Split 面板分割的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： java 采样_java 采集数据
- 下一篇： java加快内存回收_java内存管理之