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 | 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 | 23 | </div> |
| 12 | 24 | </template> |
| 13 | 25 | ... | ... |
src/styles/components/split.less
| 1 | 1 | @split-prefix-cls: ~"@{css-prefix}split"; |
| 2 | 2 | @box-shadow: 0 0 4px 0 rgba(28, 36, 56, 0.4); |
| 3 | 3 | @trigger-bar-background: rgba(23, 35, 61, 0.25); |
| 4 | -@trigger-background: #F8F8F9; | |
| 4 | +@trigger-background: #f8f8f9; | |
| 5 | 5 | @trigger-width: 6px; |
| 6 | 6 | @trigger-bar-width: 4px; |
| 7 | 7 | @trigger-bar-offset: (@trigger-width - @trigger-bar-width) / 2; |
| ... | ... | @@ -46,6 +46,7 @@ |
| 46 | 46 | } |
| 47 | 47 | } |
| 48 | 48 | &-trigger { |
| 49 | + border: 1px solid @border-color-base; | |
| 49 | 50 | &-con { |
| 50 | 51 | position: absolute; |
| 51 | 52 | transform: translate(-50%, -50%); |
| ... | ... | @@ -71,7 +72,8 @@ |
| 71 | 72 | width: @trigger-width; |
| 72 | 73 | height: 100%; |
| 73 | 74 | background: @trigger-background; |
| 74 | - box-shadow: @box-shadow; | |
| 75 | + border-top: none; | |
| 76 | + border-bottom: none; | |
| 75 | 77 | cursor: col-resize; |
| 76 | 78 | .@{split-prefix-cls}-trigger-bar { |
| 77 | 79 | width: @trigger-bar-width; |
| ... | ... | @@ -85,7 +87,8 @@ |
| 85 | 87 | height: @trigger-width; |
| 86 | 88 | width: 100%; |
| 87 | 89 | background: @trigger-background; |
| 88 | - box-shadow: @box-shadow; | |
| 90 | + border-left: none; | |
| 91 | + border-right: none; | |
| 89 | 92 | cursor: row-resize; |
| 90 | 93 | .@{split-prefix-cls}-trigger-bar { |
| 91 | 94 | height: @trigger-bar-width; | ... | ... |