Commit 39fc24dc428cffb4b553e5c1d9fa8bd2a1c89a7c
1 parent
1e9bece0
update Split
Showing
2 changed files
with
27 additions
and
12 deletions
Show diff stats
examples/routers/split.vue
| 1 | <template> | 1 | <template> |
| 2 | - <div class="demo-split"> | ||
| 3 | - <Split v-model="split1"> | ||
| 4 | - <div slot="left" class="demo-split-pane"> | ||
| 5 | - 左边面板 | ||
| 6 | - </div> | ||
| 7 | - <div slot="right" class="demo-split-pane"> | ||
| 8 | - 右边面板 | ||
| 9 | - </div> | ||
| 10 | - </Split> | 2 | + <div> |
| 3 | + <div class="demo-split"> | ||
| 4 | + <Split v-model="split1"> | ||
| 5 | + <div slot="left" class="demo-split-pane"> | ||
| 6 | + 左边面板 | ||
| 7 | + </div> | ||
| 8 | + <div slot="right" class="demo-split-pane"> | ||
| 9 | + 右边面板 | ||
| 10 | + </div> | ||
| 11 | + </Split> | ||
| 12 | + </div> | ||
| 13 | + <div class="demo-split"> | ||
| 14 | + <Split v-model="split1" mode="vertical"> | ||
| 15 | + <div slot="left" class="demo-split-pane"> | ||
| 16 | + 左边面板 | ||
| 17 | + </div> | ||
| 18 | + <div slot="right" class="demo-split-pane"> | ||
| 19 | + 右边面板 | ||
| 20 | + </div> | ||
| 21 | + </Split> | ||
| 22 | + </div> | ||
| 11 | </div> | 23 | </div> |
| 12 | </template> | 24 | </template> |
| 13 | 25 |
src/styles/components/split.less
| 1 | @split-prefix-cls: ~"@{css-prefix}split"; | 1 | @split-prefix-cls: ~"@{css-prefix}split"; |
| 2 | @box-shadow: 0 0 4px 0 rgba(28, 36, 56, 0.4); | 2 | @box-shadow: 0 0 4px 0 rgba(28, 36, 56, 0.4); |
| 3 | @trigger-bar-background: rgba(23, 35, 61, 0.25); | 3 | @trigger-bar-background: rgba(23, 35, 61, 0.25); |
| 4 | -@trigger-background: #F8F8F9; | 4 | +@trigger-background: #f8f8f9; |
| 5 | @trigger-width: 6px; | 5 | @trigger-width: 6px; |
| 6 | @trigger-bar-width: 4px; | 6 | @trigger-bar-width: 4px; |
| 7 | @trigger-bar-offset: (@trigger-width - @trigger-bar-width) / 2; | 7 | @trigger-bar-offset: (@trigger-width - @trigger-bar-width) / 2; |
| @@ -46,6 +46,7 @@ | @@ -46,6 +46,7 @@ | ||
| 46 | } | 46 | } |
| 47 | } | 47 | } |
| 48 | &-trigger { | 48 | &-trigger { |
| 49 | + border: 1px solid @border-color-base; | ||
| 49 | &-con { | 50 | &-con { |
| 50 | position: absolute; | 51 | position: absolute; |
| 51 | transform: translate(-50%, -50%); | 52 | transform: translate(-50%, -50%); |
| @@ -71,7 +72,8 @@ | @@ -71,7 +72,8 @@ | ||
| 71 | width: @trigger-width; | 72 | width: @trigger-width; |
| 72 | height: 100%; | 73 | height: 100%; |
| 73 | background: @trigger-background; | 74 | background: @trigger-background; |
| 74 | - box-shadow: @box-shadow; | 75 | + border-top: none; |
| 76 | + border-bottom: none; | ||
| 75 | cursor: col-resize; | 77 | cursor: col-resize; |
| 76 | .@{split-prefix-cls}-trigger-bar { | 78 | .@{split-prefix-cls}-trigger-bar { |
| 77 | width: @trigger-bar-width; | 79 | width: @trigger-bar-width; |
| @@ -85,7 +87,8 @@ | @@ -85,7 +87,8 @@ | ||
| 85 | height: @trigger-width; | 87 | height: @trigger-width; |
| 86 | width: 100%; | 88 | width: 100%; |
| 87 | background: @trigger-background; | 89 | background: @trigger-background; |
| 88 | - box-shadow: @box-shadow; | 90 | + border-left: none; |
| 91 | + border-right: none; | ||
| 89 | cursor: row-resize; | 92 | cursor: row-resize; |
| 90 | .@{split-prefix-cls}-trigger-bar { | 93 | .@{split-prefix-cls}-trigger-bar { |
| 91 | height: @trigger-bar-width; | 94 | height: @trigger-bar-width; |