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 | <template> | 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 | </div> | 9 | </div> |
| 13 | - <div slot="right" class="pane right-pane"></div> | ||
| 14 | </Split> | 10 | </Split> |
| 15 | </div> | 11 | </div> |
| 16 | </template> | 12 | </template> |
| @@ -21,7 +17,8 @@ | @@ -21,7 +17,8 @@ | ||
| 21 | data () { | 17 | data () { |
| 22 | return { | 18 | return { |
| 23 | offset: 0.6, | 19 | offset: 0.6, |
| 24 | - offsetVertical: '250px' | 20 | + offsetVertical: '250px', |
| 21 | + split1: 0.5 | ||
| 25 | } | 22 | } |
| 26 | }, | 23 | }, |
| 27 | methods: { | 24 | methods: { |
| @@ -73,3 +70,9 @@ | @@ -73,3 +70,9 @@ | ||
| 73 | } | 70 | } |
| 74 | } | 71 | } |
| 75 | </style> | 72 | </style> |
| 73 | +<style> | ||
| 74 | + .demo-split{ | ||
| 75 | + height: 300px; | ||
| 76 | + border: 1px solid #dddee1; | ||
| 77 | + } | ||
| 78 | +</style> | ||
| 76 | \ No newline at end of file | 79 | \ No newline at end of file |
src/components/split/split.vue
| 1 | <template> | 1 | <template> |
| 2 | <div ref="outerWrapper" :class="wrapperClasses"> | 2 | <div ref="outerWrapper" :class="wrapperClasses"> |
| 3 | <div v-if="isHorizontal" :class="`${prefix}-horizontal`"> | 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 | <slot name="left"/> | 5 | <slot name="left"/> |
| 6 | </div> | 6 | </div> |
| 7 | <div :class="`${prefix}-trigger-con`" :style="{left: `${offset}%`}" @mousedown="handleMousedown"> | 7 | <div :class="`${prefix}-trigger-con`" :style="{left: `${offset}%`}" @mousedown="handleMousedown"> |
| @@ -9,12 +9,12 @@ | @@ -9,12 +9,12 @@ | ||
| 9 | <trigger mode="vertical"/> | 9 | <trigger mode="vertical"/> |
| 10 | </slot> | 10 | </slot> |
| 11 | </div> | 11 | </div> |
| 12 | - <div :style="{left: `${offset}%`}" :class="[`${prefix}-pane`, 'right-pane']"> | 12 | + <div :style="{left: `${offset}%`}" class="right-pane" :class="paneClasses"> |
| 13 | <slot name="right"/> | 13 | <slot name="right"/> |
| 14 | </div> | 14 | </div> |
| 15 | </div> | 15 | </div> |
| 16 | <div v-else :class="`${prefix}-vertical`"> | 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 | <slot name="top"/> | 18 | <slot name="top"/> |
| 19 | </div> | 19 | </div> |
| 20 | <div :class="`${prefix}-trigger-con`" :style="{top: `${offset}%`}" @mousedown="handleMousedown"> | 20 | <div :class="`${prefix}-trigger-con`" :style="{top: `${offset}%`}" @mousedown="handleMousedown"> |
| @@ -22,7 +22,7 @@ | @@ -22,7 +22,7 @@ | ||
| 22 | <trigger mode="horizontal"/> | 22 | <trigger mode="horizontal"/> |
| 23 | </slot> | 23 | </slot> |
| 24 | </div> | 24 | </div> |
| 25 | - <div :style="{top: `${offset}%`}" :class="[`${prefix}-pane`, 'bottom-pane']"> | 25 | + <div :style="{top: `${offset}%`}" class="bottom-pane" :class="paneClasses"> |
| 26 | <slot name="bottom"/> | 26 | <slot name="bottom"/> |
| 27 | </div> | 27 | </div> |
| 28 | </div> | 28 | </div> |
| @@ -79,6 +79,14 @@ | @@ -79,6 +79,14 @@ | ||
| 79 | this.isMoving ? 'no-select' : '' | 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 | isHorizontal () { | 90 | isHorizontal () { |
| 83 | return this.mode === 'horizontal'; | 91 | return this.mode === 'horizontal'; |
| 84 | }, | 92 | }, |
src/styles/components/split.less
| @@ -9,106 +9,112 @@ | @@ -9,106 +9,112 @@ | ||
| 9 | @trigger-bar-weight: 1px; | 9 | @trigger-bar-weight: 1px; |
| 10 | @trigger-bar-con-height: (@trigger-bar-weight + @trigger-bar-interval) * 8; | 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 | } |