theluyuan/layui
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

1.新增分割面板组件

Browse Source
This commit is contained in:
dingyongya
2022-01-20 13:32:35 +08:00
parent 47c8714896
commit 4934738a32
4 changed files with 246 additions and 89 deletions
Download Patch File Download Diff File Expand all files Collapse all files

128
example/docs/zh-CN/components/splitPanel.md
View File

@@ -10,31 +10,129 @@
<template>
<div>
<lay-split-panel style="height: 300px">
<lay-split-panel-item>1</lay-split-panel-item>
<lay-split-panel-item>2</lay-split-panel-item>
<lay-split-panel-item>A</lay-split-panel-item>
<lay-split-panel-item>B</lay-split-panel-item>
<lay-split-panel-item>C</lay-split-panel-item>
</lay-split-panel>
</div>
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
const loading = ref(true);
const active = ref(-1);
const nexts = () => {
if (active.value++ >=3) active.value = 0
};
const previous = () => {
if (active.value-- ===0) active.value = 0
};
return {
loading,
active
}
}
}
</script>
:::
::: title 自定义比例
:::
::: demo
<template>
<div>
<lay-split-panel style="height: 300px">
<lay-split-panel-item :space="30">1</lay-split-panel-item>
<lay-split-panel-item :space="20">2</lay-split-panel-item>
<lay-split-panel-item :space="50">3</lay-split-panel-item>
</lay-split-panel>
</div>
</template>
<script>
export default {
setup() {
}
}
</script>
:::
::: title 垂直布局
:::
::: demo
<template>
<div>
<lay-split-panel :vertical="true" style="height: 600px; width: 100%">
<lay-split-panel-item>1</lay-split-panel-item>
<lay-split-panel-item>2</lay-split-panel-item>
<lay-split-panel-item>3</lay-split-panel-item>
</lay-split-panel>
</div>
</template>
<script>
export default {
setup() {
}
}
</script>
:::
::: title 组合用法
:::
::: demo
<template>
<div>
<lay-split-panel style="height: 600px;">
<lay-split-panel-item :space="60">
<lay-split-panel :vertical="true" style="height: 600px; width: 100%">
<lay-split-panel-item :space="40">1</lay-split-panel-item>
<lay-split-panel-item :space="40">2</lay-split-panel-item>
</lay-split-panel>
</lay-split-panel-item>
<lay-split-panel-item :space="40">2</lay-split-panel-item>
</lay-split-panel>
</div>
</template>
<script>
export default {
setup() {
}
}
</script>
:::
::: title splitPanel属性
:::
::: table
| 属性 | 描述 | 类型 |可选值 | 默认值|
| ----- | ---- | ------ | ---| ---|
| vertical | 是否垂直布局 | Boolean |`true` `false`| false |
| minSize | 块拉动最小范围(按像素 `px`) | number | - | 50 |
:::
::: title splitPanelItem属性
:::
::: table
| 属性 | 描述 | 类型 |可选值 | 默认值|
| ----- | ---- | ------ | ---| ---|
| space | 默认每个站多大比例（`%`）, 设置一个，<br/> 其他的都需要设置，合计为（`100` ） | number | - | 按照个数平分 |
:::
::: comment
:::
::: previousNext splitPanel
:::