Commit 1e9bece0c1c3fe975096db4933a9d21b0f21203e
1 parent
cd397a6f
update Split
Showing
3 changed files
with
129 additions
and
112 deletions
Show diff stats
examples/routers/split.vue
| 1 | 1 | <template> |
| 2 | - <div class="split-pane-page-wrapper"> | |
| 3 | - <Split v-model="offset" @on-moving="handleMoving"> | |
| 4 | - <div slot="left" class="pane left-pane"> | |
| 5 | - <Split v-model="offsetVertical" mode="vertical" @on-moving="handleMoving"> | |
| 6 | - <div slot="top" class="pane top-pane"></div> | |
| 7 | - <div slot="bottom" class="pane bottom-pane"></div> | |
| 8 | - <div slot="trigger" class="custom-trigger"> | |
| 9 | - <Icon class="trigger-icon" :size="22" type="android-more-vertical" color="#000000"/> | |
| 10 | - </div> | |
| 11 | - </Split> | |
| 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 | + 右边面板 | |
| 12 | 9 | </div> |
| 13 | - <div slot="right" class="pane right-pane"></div> | |
| 14 | 10 | </Split> |
| 15 | 11 | </div> |
| 16 | 12 | </template> |
| ... | ... | @@ -21,7 +17,8 @@ |
| 21 | 17 | data () { |
| 22 | 18 | return { |
| 23 | 19 | offset: 0.6, |
| 24 | - offsetVertical: '250px' | |
| 20 | + offsetVertical: '250px', | |
| 21 | + split1: 0.5 | |
| 25 | 22 | } |
| 26 | 23 | }, |
| 27 | 24 | methods: { |
| ... | ... | @@ -73,3 +70,9 @@ |
| 73 | 70 | } |
| 74 | 71 | } |
| 75 | 72 | </style> |
| 73 | +<style> | |
| 74 | + .demo-split{ | |
| 75 | + height: 300px; | |
| 76 | + border: 1px solid #dddee1; | |
| 77 | + } | |
| 78 | +</style> | |
| 76 | 79 | \ No newline at end of file | ... | ... |
src/components/split/split.vue
| 1 | 1 | <template> |
| 2 | 2 | <div ref="outerWrapper" :class="wrapperClasses"> |
| 3 | 3 | <div v-if="isHorizontal" :class="`${prefix}-horizontal`"> |
| 4 | - <div :style="{right: `${anotherOffset}%`}" :class="[`${prefix}-pane`, 'left-pane']"> | |
| 4 | + <div :style="{right: `${anotherOffset}%`}" class="left-pane" :class="paneClasses"> | |
| 5 | 5 | <slot name="left"/> |
| 6 | 6 | </div> |
| 7 | 7 | <div :class="`${prefix}-trigger-con`" :style="{left: `${offset}%`}" @mousedown="handleMousedown"> |
| ... | ... | @@ -9,12 +9,12 @@ |
| 9 | 9 | <trigger mode="vertical"/> |
| 10 | 10 | </slot> |
| 11 | 11 | </div> |
| 12 | - <div :style="{left: `${offset}%`}" :class="[`${prefix}-pane`, 'right-pane']"> | |
| 12 | + <div :style="{left: `${offset}%`}" class="right-pane" :class="paneClasses"> | |
| 13 | 13 | <slot name="right"/> |
| 14 | 14 | </div> |
| 15 | 15 | </div> |
| 16 | 16 | <div v-else :class="`${prefix}-vertical`"> |
| 17 | - <div :style="{bottom: `${anotherOffset}%`}" :class="[`${prefix}-pane`, 'top-pane']"> | |
| 17 | + <div :style="{bottom: `${anotherOffset}%`}" class="top-pane" :class="paneClasses"> | |
| 18 | 18 | <slot name="top"/> |
| 19 | 19 | </div> |
| 20 | 20 | <div :class="`${prefix}-trigger-con`" :style="{top: `${offset}%`}" @mousedown="handleMousedown"> |
| ... | ... | @@ -22,7 +22,7 @@ |
| 22 | 22 | <trigger mode="horizontal"/> |
| 23 | 23 | </slot> |
| 24 | 24 | </div> |
| 25 | - <div :style="{top: `${offset}%`}" :class="[`${prefix}-pane`, 'bottom-pane']"> | |
| 25 | + <div :style="{top: `${offset}%`}" class="bottom-pane" :class="paneClasses"> | |
| 26 | 26 | <slot name="bottom"/> |
| 27 | 27 | </div> |
| 28 | 28 | </div> |
| ... | ... | @@ -79,6 +79,14 @@ |
| 79 | 79 | this.isMoving ? 'no-select' : '' |
| 80 | 80 | ]; |
| 81 | 81 | }, |
| 82 | + paneClasses () { | |
| 83 | + return [ | |
| 84 | + `${this.prefix}-pane`, | |
| 85 | + { | |
| 86 | + [`${this.prefix}-pane-moving`]: this.isMoving | |
| 87 | + } | |
| 88 | + ]; | |
| 89 | + }, | |
| 82 | 90 | isHorizontal () { |
| 83 | 91 | return this.mode === 'horizontal'; |
| 84 | 92 | }, | ... | ... |
src/styles/components/split.less
| ... | ... | @@ -9,106 +9,112 @@ |
| 9 | 9 | @trigger-bar-weight: 1px; |
| 10 | 10 | @trigger-bar-con-height: (@trigger-bar-weight + @trigger-bar-interval) * 8; |
| 11 | 11 | |
| 12 | -.@{split-prefix-cls}{ | |
| 13 | - &-wrapper{ | |
| 14 | - position: relative; | |
| 15 | - width: 100%; | |
| 16 | - height: 100%; | |
| 17 | - } | |
| 18 | - &-pane{ | |
| 19 | - position: absolute; | |
| 20 | - &.left-pane, &.right-pane{ | |
| 21 | - top: 0px; | |
| 22 | - bottom: 0px; | |
| 12 | +.@{split-prefix-cls} { | |
| 13 | + &-wrapper { | |
| 14 | + position: relative; | |
| 15 | + width: 100%; | |
| 16 | + height: 100%; | |
| 23 | 17 | } |
| 24 | - &.left-pane{ | |
| 25 | - left: 0px; | |
| 26 | - } | |
| 27 | - &.right-pane{ | |
| 28 | - right: 0px; | |
| 29 | - } | |
| 30 | - &.top-pane, &.bottom-pane{ | |
| 31 | - left: 0px; | |
| 32 | - right: 0px; | |
| 33 | - } | |
| 34 | - &.top-pane{ | |
| 35 | - top: 0px; | |
| 36 | - } | |
| 37 | - &.bottom-pane{ | |
| 38 | - bottom: 0px; | |
| 39 | - } | |
| 40 | - } | |
| 41 | - &-trigger{ | |
| 42 | - &-con{ | |
| 43 | - position: absolute; | |
| 44 | - transform: translate(-50%, -50%); | |
| 45 | - z-index: 10; | |
| 46 | - } | |
| 47 | - &-bar-con{ | |
| 48 | - position: absolute; | |
| 49 | - overflow: hidden; | |
| 50 | - &.vertical{ | |
| 51 | - left: @trigger-bar-offset; | |
| 52 | - top: 50%; | |
| 53 | - height: @trigger-bar-con-height; | |
| 54 | - transform: translate(0, -50%); | |
| 55 | - } | |
| 56 | - &.horizontal{ | |
| 57 | - left: 50%; | |
| 58 | - top: @trigger-bar-offset; | |
| 59 | - width: @trigger-bar-con-height; | |
| 60 | - transform: translate(-50%, 0); | |
| 61 | - } | |
| 18 | + &-pane { | |
| 19 | + position: absolute; | |
| 20 | + &.left-pane, &.right-pane { | |
| 21 | + top: 0; | |
| 22 | + bottom: 0; | |
| 23 | + } | |
| 24 | + &.left-pane { | |
| 25 | + left: 0; | |
| 26 | + } | |
| 27 | + &.right-pane { | |
| 28 | + right: 0; | |
| 29 | + } | |
| 30 | + &.top-pane, &.bottom-pane { | |
| 31 | + left: 0; | |
| 32 | + right: 0; | |
| 33 | + } | |
| 34 | + &.top-pane { | |
| 35 | + top: 0; | |
| 36 | + } | |
| 37 | + &.bottom-pane { | |
| 38 | + bottom: 0; | |
| 39 | + } | |
| 40 | + | |
| 41 | + &-moving{ | |
| 42 | + -webkit-user-select: none; | |
| 43 | + -moz-user-select: none; | |
| 44 | + -ms-user-select: none; | |
| 45 | + user-select: none; | |
| 46 | + } | |
| 62 | 47 | } |
| 63 | - &-vertical{ | |
| 64 | - width: @trigger-width; | |
| 65 | - height: 100%; | |
| 66 | - background: @trigger-background; | |
| 67 | - box-shadow: @box-shadow; | |
| 68 | - cursor: col-resize; | |
| 69 | - .@{split-prefix-cls}-trigger-bar{ | |
| 70 | - width: @trigger-bar-width; | |
| 71 | - height: 1px; | |
| 72 | - background: @trigger-bar-background; | |
| 73 | - float: left; | |
| 74 | - margin-top: @trigger-bar-interval; | |
| 75 | - } | |
| 48 | + &-trigger { | |
| 49 | + &-con { | |
| 50 | + position: absolute; | |
| 51 | + transform: translate(-50%, -50%); | |
| 52 | + z-index: 10; | |
| 53 | + } | |
| 54 | + &-bar-con { | |
| 55 | + position: absolute; | |
| 56 | + overflow: hidden; | |
| 57 | + &.vertical { | |
| 58 | + left: @trigger-bar-offset; | |
| 59 | + top: 50%; | |
| 60 | + height: @trigger-bar-con-height; | |
| 61 | + transform: translate(0, -50%); | |
| 62 | + } | |
| 63 | + &.horizontal { | |
| 64 | + left: 50%; | |
| 65 | + top: @trigger-bar-offset; | |
| 66 | + width: @trigger-bar-con-height; | |
| 67 | + transform: translate(-50%, 0); | |
| 68 | + } | |
| 69 | + } | |
| 70 | + &-vertical { | |
| 71 | + width: @trigger-width; | |
| 72 | + height: 100%; | |
| 73 | + background: @trigger-background; | |
| 74 | + box-shadow: @box-shadow; | |
| 75 | + cursor: col-resize; | |
| 76 | + .@{split-prefix-cls}-trigger-bar { | |
| 77 | + width: @trigger-bar-width; | |
| 78 | + height: 1px; | |
| 79 | + background: @trigger-bar-background; | |
| 80 | + float: left; | |
| 81 | + margin-top: @trigger-bar-interval; | |
| 82 | + } | |
| 83 | + } | |
| 84 | + &-horizontal { | |
| 85 | + height: @trigger-width; | |
| 86 | + width: 100%; | |
| 87 | + background: @trigger-background; | |
| 88 | + box-shadow: @box-shadow; | |
| 89 | + cursor: row-resize; | |
| 90 | + .@{split-prefix-cls}-trigger-bar { | |
| 91 | + height: @trigger-bar-width; | |
| 92 | + width: 1px; | |
| 93 | + background: @trigger-bar-background; | |
| 94 | + float: left; | |
| 95 | + margin-right: @trigger-bar-interval; | |
| 96 | + } | |
| 97 | + } | |
| 76 | 98 | } |
| 77 | - &-horizontal{ | |
| 78 | - height: @trigger-width; | |
| 79 | - width: 100%; | |
| 80 | - background: @trigger-background; | |
| 81 | - box-shadow: @box-shadow; | |
| 82 | - cursor: row-resize; | |
| 83 | - .@{split-prefix-cls}-trigger-bar{ | |
| 84 | - height: @trigger-bar-width; | |
| 85 | - width: 1px; | |
| 86 | - background: @trigger-bar-background; | |
| 87 | - float: left; | |
| 88 | - margin-right: @trigger-bar-interval; | |
| 89 | - } | |
| 99 | + &-horizontal { | |
| 100 | + .@{split-prefix-cls}-trigger-con { | |
| 101 | + top: 50%; | |
| 102 | + height: 100%; | |
| 103 | + width: 0; | |
| 104 | + } | |
| 90 | 105 | } |
| 91 | - } | |
| 92 | - &-horizontal{ | |
| 93 | - .@{split-prefix-cls}-trigger-con{ | |
| 94 | - top: 50%; | |
| 95 | - height: 100%; | |
| 96 | - width: 0; | |
| 106 | + &-vertical { | |
| 107 | + .@{split-prefix-cls}-trigger-con { | |
| 108 | + left: 50%; | |
| 109 | + height: 0; | |
| 110 | + width: 100%; | |
| 111 | + } | |
| 97 | 112 | } |
| 98 | - } | |
| 99 | - &-vertical{ | |
| 100 | - .@{split-prefix-cls}-trigger-con{ | |
| 101 | - left: 50%; | |
| 102 | - height: 0; | |
| 103 | - width: 100%; | |
| 113 | + .no-select { | |
| 114 | + -webkit-touch-callout: none; | |
| 115 | + -webkit-user-select: none; | |
| 116 | + -moz-user-select: none; | |
| 117 | + -ms-user-select: none; | |
| 118 | + user-select: none; | |
| 104 | 119 | } |
| 105 | - } | |
| 106 | - .no-select{ | |
| 107 | - -webkit-touch-callout: none; | |
| 108 | - -webkit-user-select: none; | |
| 109 | - -khtml-user-select: none; | |
| 110 | - -moz-user-select: none; | |
| 111 | - -ms-user-select: none; | |
| 112 | - user-select: none; | |
| 113 | - } | |
| 114 | 120 | } | ... | ... |