|
|
|
@@ -0,0 +1,306 @@ |
|
|
|
<template> |
|
|
|
<div class="split-page"> |
|
|
|
<h2>可将一片区域，分割为可以拖拽调整宽度或高度的两部分区域。</h2> |
|
|
|
<div class="demo-box"> |
|
|
|
<h3>左右分割</h3> |
|
|
|
<div class="split"> |
|
|
|
<SplitPane v-model="split1"> |
|
|
|
<template #left> |
|
|
|
<div class="split-pane">Left Pane</div> |
|
|
|
</template> |
|
|
|
<template #right> |
|
|
|
<div class="split-pane">Right Pane</div> |
|
|
|
</template> |
|
|
|
</SplitPane> |
|
|
|
</div> |
|
|
|
<el-collapse> |
|
|
|
<el-collapse-item title="显示代码"> |
|
|
|
<div> |
|
|
|
<pre> |
|
|
|
<div class="split"> |
|
|
|
<SplitPane v-model="split1"> |
|
|
|
<template #left> |
|
|
|
<div class="split-pane">Left Pane</div> |
|
|
|
</template> |
|
|
|
<template #right> |
|
|
|
<div class="split-pane">Right Pane</div> |
|
|
|
</template> |
|
|
|
</SplitPane> |
|
|
|
</div> |
|
|
|
data() { |
|
|
|
return { |
|
|
|
split1: 0.5 |
|
|
|
} |
|
|
|
} |
|
|
|
.split { |
|
|
|
height: 200px; |
|
|
|
border: 1px solid #dcdee2; |
|
|
|
} |
|
|
|
.split-pane { |
|
|
|
padding: 20px; |
|
|
|
} |
|
|
|
</pre> |
|
|
|
</div> |
|
|
|
</el-collapse-item> |
|
|
|
</el-collapse> |
|
|
|
</div> |
|
|
|
<div class="demo-box"> |
|
|
|
<h3>上下分割</h3> |
|
|
|
<div class="split"> |
|
|
|
<SplitPane v-model="split2" mode="vertical"> |
|
|
|
<template #top> |
|
|
|
<div class="split-pane">Left Pane</div> |
|
|
|
</template> |
|
|
|
<template #bottom> |
|
|
|
<div class="split-pane">Right Pane</div> |
|
|
|
</template> |
|
|
|
</SplitPane> |
|
|
|
</div> |
|
|
|
<el-collapse> |
|
|
|
<el-collapse-item title="显示代码"> |
|
|
|
<div> |
|
|
|
<pre> |
|
|
|
<div class="split" mode="vertical"> |
|
|
|
<SplitPane v-model="split2"> |
|
|
|
<template #top> |
|
|
|
<div class="split-pane">Left Pane</div> |
|
|
|
</template> |
|
|
|
<template #bottom> |
|
|
|
<div class="split-pane">Right Pane</div> |
|
|
|
</template> |
|
|
|
</SplitPane> |
|
|
|
</div> |
|
|
|
data() { |
|
|
|
return { |
|
|
|
split2: 0.5 |
|
|
|
} |
|
|
|
} |
|
|
|
.split { |
|
|
|
height: 200px; |
|
|
|
border: 1px solid #dcdee2; |
|
|
|
} |
|
|
|
.split-pane { |
|
|
|
padding: 20px; |
|
|
|
} |
|
|
|
</pre> |
|
|
|
</div> |
|
|
|
</el-collapse-item> |
|
|
|
</el-collapse> |
|
|
|
</div> |
|
|
|
<div class="demo-box"> |
|
|
|
<h3>嵌套使用</h3> |
|
|
|
<div class="split"> |
|
|
|
<SplitPane v-model="split3"> |
|
|
|
<template #left> |
|
|
|
<div class="split-pane no-padding"> |
|
|
|
<SplitPane v-model="split4" mode="vertical"> |
|
|
|
<template #top> |
|
|
|
<div class="split-pane">Top Pane</div> |
|
|
|
</template> |
|
|
|
<template #bottom> |
|
|
|
<div class="split-pane">Bottom Pane</div> |
|
|
|
</template> |
|
|
|
</SplitPane> |
|
|
|
</div> |
|
|
|
</template> |
|
|
|
<template #right> |
|
|
|
<div class="split-pane">Right Pane</div> |
|
|
|
</template> |
|
|
|
</SplitPane> |
|
|
|
</div> |
|
|
|
<el-collapse> |
|
|
|
<el-collapse-item title="显示代码"> |
|
|
|
<div> |
|
|
|
<pre> |
|
|
|
<div class="split"> |
|
|
|
<SplitPane v-model="split3"> |
|
|
|
<template #left> |
|
|
|
<div class="split-pane no-padding"> |
|
|
|
<SplitPane v-model="split4" mode="vertical"> |
|
|
|
<template #top> |
|
|
|
<div class="split-pane">Top Pane</div> |
|
|
|
</template> |
|
|
|
<template #bottom> |
|
|
|
<div class="split-pane">Bottom Pane</div> |
|
|
|
</template> |
|
|
|
</SplitPane> |
|
|
|
</div> |
|
|
|
</template> |
|
|
|
<template #right> |
|
|
|
<div class="split-pane">Right Pane</div> |
|
|
|
</template> |
|
|
|
</SplitPane> |
|
|
|
</div> |
|
|
|
data() { |
|
|
|
return { |
|
|
|
split3: 0.5, |
|
|
|
split4: 0.5 |
|
|
|
} |
|
|
|
} |
|
|
|
.split { |
|
|
|
height: 200px; |
|
|
|
border: 1px solid #dcdee2; |
|
|
|
} |
|
|
|
.split-pane { |
|
|
|
padding: 20px; |
|
|
|
} |
|
|
|
.split-pane.no-padding { |
|
|
|
height: 200px; |
|
|
|
padding: 0; |
|
|
|
} |
|
|
|
</pre> |
|
|
|
</div> |
|
|
|
</el-collapse-item> |
|
|
|
</el-collapse> |
|
|
|
</div> |
|
|
|
<div> |
|
|
|
<h3>API</h3> |
|
|
|
<h4>SplitPane Props</h4> |
|
|
|
<base-table :table-props="tableProps1" :table-data="tableData1" /> |
|
|
|
<h4>SplitPane Events</h4> |
|
|
|
<base-table :table-props="tableProps2" :table-data="tableData2" /> |
|
|
|
<h4>SplitPane Slots</h4> |
|
|
|
<base-table :table-props="tableProps3" :table-data="tableData3" /> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</template> |
|
|
|
<script> |
|
|
|
export default { |
|
|
|
name: 'splitPane', |
|
|
|
data() { |
|
|
|
return { |
|
|
|
split1: 0.5, |
|
|
|
split2: 0.5, |
|
|
|
split3: 0.5, |
|
|
|
split4: 0.5, |
|
|
|
tableProps1: [ |
|
|
|
{ |
|
|
|
prop: 'a1', |
|
|
|
label: '属性' |
|
|
|
}, |
|
|
|
{ |
|
|
|
prop: 'a2', |
|
|
|
label: '说明', |
|
|
|
minWidth: 200 |
|
|
|
}, |
|
|
|
{ |
|
|
|
prop: 'a3', |
|
|
|
label: '类型' |
|
|
|
}, |
|
|
|
{ |
|
|
|
prop: 'a4', |
|
|
|
label: '默认值' |
|
|
|
} |
|
|
|
], |
|
|
|
tableData1: [ |
|
|
|
{ |
|
|
|
a1: 'model-value', |
|
|
|
a2: '面板位置，可以是 0~1 代表百分比，或具体数值的像素，可用 v-model 双向绑定', |
|
|
|
a3: 'Number | String', |
|
|
|
a4: '0.5' |
|
|
|
}, |
|
|
|
{ |
|
|
|
a1: 'mode', |
|
|
|
a2: '类型，可选值为 horizontal 或 vertical', |
|
|
|
a3: 'String', |
|
|
|
a4: 'horizontal' |
|
|
|
}, |
|
|
|
{ |
|
|
|
a1: 'min', |
|
|
|
a2: '最小阈值', |
|
|
|
a3: 'Number | String', |
|
|
|
a4: '40px' |
|
|
|
}, |
|
|
|
{ |
|
|
|
a1: 'max', |
|
|
|
a2: '最大阈值', |
|
|
|
a3: 'Number | String', |
|
|
|
a4: '40px' |
|
|
|
} |
|
|
|
], |
|
|
|
tableProps2: [ |
|
|
|
{ |
|
|
|
prop: 'a1', |
|
|
|
label: '事件名' |
|
|
|
}, |
|
|
|
{ |
|
|
|
prop: 'a2', |
|
|
|
label: '说明' |
|
|
|
}, |
|
|
|
{ |
|
|
|
prop: 'a3', |
|
|
|
label: '返回值' |
|
|
|
} |
|
|
|
], |
|
|
|
tableData2: [ |
|
|
|
{ |
|
|
|
a1: 'on-move-start', |
|
|
|
a2: '拖拽开始', |
|
|
|
a3: '-' |
|
|
|
}, |
|
|
|
{ |
|
|
|
a1: 'on-moving', |
|
|
|
a2: '拖拽中', |
|
|
|
a3: 'event' |
|
|
|
}, |
|
|
|
{ |
|
|
|
a1: 'on-move-end', |
|
|
|
a2: '拖拽结束', |
|
|
|
a3: '-' |
|
|
|
} |
|
|
|
], |
|
|
|
tableProps3: [ |
|
|
|
{ |
|
|
|
prop: 'a1', |
|
|
|
label: '名称' |
|
|
|
}, |
|
|
|
{ |
|
|
|
prop: 'a2', |
|
|
|
label: '说明' |
|
|
|
} |
|
|
|
], |
|
|
|
tableData3: [ |
|
|
|
{ |
|
|
|
a1: 'left', |
|
|
|
a2: 'mode 为 horizontal 时可用，左边面板' |
|
|
|
}, |
|
|
|
{ |
|
|
|
a1: 'right', |
|
|
|
a2: 'mode 为 horizontal 时可用，右边面板' |
|
|
|
}, |
|
|
|
{ |
|
|
|
a1: 'top', |
|
|
|
a2: 'mode 为 vertical 时可用，上边面板' |
|
|
|
}, |
|
|
|
{ |
|
|
|
a1: 'bottom', |
|
|
|
a2: 'mode 为 vertical 时可用，下边面板' |
|
|
|
}, |
|
|
|
{ |
|
|
|
a1: 'trigger', |
|
|
|
a2: '自定义分割拖拽节点' |
|
|
|
} |
|
|
|
] |
|
|
|
} |
|
|
|
}, |
|
|
|
methods: {} |
|
|
|
} |
|
|
|
</script> |
|
|
|
<style lang="scss" scoped> |
|
|
|
.split-page { |
|
|
|
.demo-box { |
|
|
|
margin-bottom: 40px; |
|
|
|
.split { |
|
|
|
height: 200px; |
|
|
|
border: 1px solid #dcdee2; |
|
|
|
} |
|
|
|
.split-pane { |
|
|
|
padding: 20px; |
|
|
|
} |
|
|
|
.split-pane.no-padding { |
|
|
|
height: 200px; |
|
|
|
padding: 0; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
</style> |
