🐛(component): splitPanel

space 修改为像素,其他自适应

ISSUES CLOSED: https://gitee.com/layui/layui-vue/issues/I5FB3S
This commit is contained in:
dingyongya
2022-07-11 18:09:21 +08:00
parent afec6ca6cd
commit 4a877f81f5
12 changed files with 141 additions and 101 deletions

View File

@@ -25,6 +25,16 @@
<script>
</script>
<style>
.lay-split-panel-item{
display: flex;
font-size: 16px;
font-weight: bold;
justify-content: center;
align-items: center;
}
</style>
:::
::: title 自定义比例
@@ -36,9 +46,9 @@
<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-item :space="200">1</lay-split-panel-item>
<lay-split-panel-item>2</lay-split-panel-item>
<lay-split-panel-item :space="200">3</lay-split-panel-item>
</lay-split-panel>
</div>
</template>
@@ -78,13 +88,14 @@
<template>
<div>
<lay-split-panel style="height: 600px;">
<lay-split-panel-item :space="60">
<lay-split-panel-item :space="300">
<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-item :space="200">1</lay-split-panel-item>
<lay-split-panel-item>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-item>2</lay-split-panel-item>
<lay-split-panel-item>2</lay-split-panel-item>
</lay-split-panel>
</div>
</template>
@@ -112,7 +123,7 @@
| 属性 | 描述 | 类型 |可选值 | 默认值|
| ----- | ---- | ------ | ---| ---|
| space | 默认每个站多大比例(`%`, 设置一个,<br/> 其他的都需要设置,合计为(`100` | number | - | 按照个数平分 |
| space | 默认每个`px` , 其他的自动平分 | number | - | 按照个数平分 |
:::
::: contributor splitPanel