drip-public/iview
6
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

update Split

Browse source
This commit is contained in:
梁灏 2018-06-30 16:30:07 +08:00
parent 1e9bece0c1
commit 39fc24dc42
2 changed files with 27 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

30
examples/routers/split.vue
View file

@ -1,13 +1,25 @@
<template> <template>
<div class="demo-split"> <div>
<Split v-model="split1"> <div class="demo-split">
<div slot="left" class="demo-split-pane"> <Split v-model="split1">
左边面板 <div slot="left" class="demo-split-pane">
</div> 左边面板
<div slot="right" class="demo-split-pane"> </div>
右边面板 <div slot="right" class="demo-split-pane">
</div> 右边面板
</Split> </div>
</Split>
</div>
<div class="demo-split">
<Split v-model="split1" mode="vertical">
<div slot="left" class="demo-split-pane">
左边面板
</div>
<div slot="right" class="demo-split-pane">
右边面板
</div>
</Split>
</div>
</div> </div>
</template> </template>

9
src/styles/components/split.less
View file

@ -1,7 +1,7 @@
@split-prefix-cls: ~"@{css-prefix}split"; @split-prefix-cls: ~"@{css-prefix}split";
@box-shadow: 0 0 4px 0 rgba(28, 36, 56, 0.4); @box-shadow: 0 0 4px 0 rgba(28, 36, 56, 0.4);
@trigger-bar-background: rgba(23, 35, 61, 0.25); @trigger-bar-background: rgba(23, 35, 61, 0.25);
@trigger-background: #F8F8F9; @trigger-background: #f8f8f9;
@trigger-width: 6px; @trigger-width: 6px;
@trigger-bar-width: 4px; @trigger-bar-width: 4px;
@trigger-bar-offset: (@trigger-width - @trigger-bar-width) / 2; @trigger-bar-offset: (@trigger-width - @trigger-bar-width) / 2;
@ -46,6 +46,7 @@
} }
} }
&-trigger { &-trigger {
border: 1px solid @border-color-base;
&-con { &-con {
position: absolute; position: absolute;
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
@ -71,7 +72,8 @@
width: @trigger-width; width: @trigger-width;
height: 100%; height: 100%;
background: @trigger-background; background: @trigger-background;
box-shadow: @box-shadow; border-top: none;
border-bottom: none;
cursor: col-resize; cursor: col-resize;
.@{split-prefix-cls}-trigger-bar { .@{split-prefix-cls}-trigger-bar {
width: @trigger-bar-width; width: @trigger-bar-width;
@ -85,7 +87,8 @@
height: @trigger-width; height: @trigger-width;
width: 100%; width: 100%;
background: @trigger-background; background: @trigger-background;
box-shadow: @box-shadow; border-left: none;
border-right: none;
cursor: row-resize; cursor: row-resize;
.@{split-prefix-cls}-trigger-bar { .@{split-prefix-cls}-trigger-bar {
height: @trigger-bar-width; height: @trigger-bar-width;