From 1e9bece0c1c3fe975096db4933a9d21b0f21203e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=A2=81=E7=81=8F?= <admin@aresn.com>
Date: Sat, 30 Jun 2018 16:23:52 +0800
Subject: [PATCH] update Split
---
examples/routers/split.vue | 27 +++--
src/components/split/split.vue | 16 ++-
src/styles/components/split.less | 198 ++++++++++++++++---------------
3 files changed, 129 insertions(+), 112 deletions(-)
diff --git a/examples/routers/split.vue b/examples/routers/split.vue
index 106327a1..1b93235a 100644
--- a/examples/routers/split.vue
+++ b/examples/routers/split.vue
@@ -1,16 +1,12 @@
<template>
- <div class="split-pane-page-wrapper">
- <Split v-model="offset" @on-moving="handleMoving">
- <div slot="left" class="pane left-pane">
- <Split v-model="offsetVertical" mode="vertical" @on-moving="handleMoving">
- <div slot="top" class="pane top-pane"></div>
- <div slot="bottom" class="pane bottom-pane"></div>
- <div slot="trigger" class="custom-trigger">
- <Icon class="trigger-icon" :size="22" type="android-more-vertical" color="#000000"/>
- </div>
- </Split>
+ <div class="demo-split">
+ <Split v-model="split1">
+ <div slot="left" class="demo-split-pane">
+ 左边面板
+ </div>
+ <div slot="right" class="demo-split-pane">
+ 右边面板
</div>
- <div slot="right" class="pane right-pane"></div>
</Split>
</div>
</template>
@@ -21,7 +17,8 @@
data () {
return {
offset: 0.6,
- offsetVertical: '250px'
+ offsetVertical: '250px',
+ split1: 0.5
}
},
methods: {
@@ -73,3 +70,9 @@
}
}
</style>
+<style>
+ .demo-split{
+ height: 300px;
+ border: 1px solid #dddee1;
+ }
+</style>
\ No newline at end of file
diff --git a/src/components/split/split.vue b/src/components/split/split.vue
index 7547ccd1..84821404 100644
--- a/src/components/split/split.vue
+++ b/src/components/split/split.vue
@@ -1,7 +1,7 @@
<template>
<div ref="outerWrapper" :class="wrapperClasses">
<div v-if="isHorizontal" :class="`${prefix}-horizontal`">
- <div :style="{right: `${anotherOffset}%`}" :class="[`${prefix}-pane`, 'left-pane']">
+ <div :style="{right: `${anotherOffset}%`}" class="left-pane" :class="paneClasses">
<slot name="left"/>
</div>
<div :class="`${prefix}-trigger-con`" :style="{left: `${offset}%`}" @mousedown="handleMousedown">
@@ -9,12 +9,12 @@
<trigger mode="vertical"/>
</slot>
</div>
- <div :style="{left: `${offset}%`}" :class="[`${prefix}-pane`, 'right-pane']">
+ <div :style="{left: `${offset}%`}" class="right-pane" :class="paneClasses">
<slot name="right"/>
</div>
</div>
<div v-else :class="`${prefix}-vertical`">
- <div :style="{bottom: `${anotherOffset}%`}" :class="[`${prefix}-pane`, 'top-pane']">
+ <div :style="{bottom: `${anotherOffset}%`}" class="top-pane" :class="paneClasses">
<slot name="top"/>
</div>
<div :class="`${prefix}-trigger-con`" :style="{top: `${offset}%`}" @mousedown="handleMousedown">
@@ -22,7 +22,7 @@
<trigger mode="horizontal"/>
</slot>
</div>
- <div :style="{top: `${offset}%`}" :class="[`${prefix}-pane`, 'bottom-pane']">
+ <div :style="{top: `${offset}%`}" class="bottom-pane" :class="paneClasses">
<slot name="bottom"/>
</div>
</div>
@@ -79,6 +79,14 @@
this.isMoving ? 'no-select' : ''
];
},
+ paneClasses () {
+ return [
+ `${this.prefix}-pane`,
+ {
+ [`${this.prefix}-pane-moving`]: this.isMoving
+ }
+ ];
+ },
isHorizontal () {
return this.mode === 'horizontal';
},
diff --git a/src/styles/components/split.less b/src/styles/components/split.less
index 0b5e81d0..28ec2b9e 100644
--- a/src/styles/components/split.less
+++ b/src/styles/components/split.less
@@ -9,106 +9,112 @@
@trigger-bar-weight: 1px;
@trigger-bar-con-height: (@trigger-bar-weight + @trigger-bar-interval) * 8;
-.@{split-prefix-cls}{
- &-wrapper{
- position: relative;
- width: 100%;
- height: 100%;
- }
- &-pane{
- position: absolute;
- &.left-pane, &.right-pane{
- top: 0px;
- bottom: 0px;
+.@{split-prefix-cls} {
+ &-wrapper {
+ position: relative;
+ width: 100%;
+ height: 100%;
}
- &.left-pane{
- left: 0px;
+ &-pane {
+ position: absolute;
+ &.left-pane, &.right-pane {
+ top: 0;
+ bottom: 0;
+ }
+ &.left-pane {
+ left: 0;
+ }
+ &.right-pane {
+ right: 0;
+ }
+ &.top-pane, &.bottom-pane {
+ left: 0;
+ right: 0;
+ }
+ &.top-pane {
+ top: 0;
+ }
+ &.bottom-pane {
+ bottom: 0;
+ }
+
+ &-moving{
+ -webkit-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ user-select: none;
+ }
}
- &.right-pane{
- right: 0px;
+ &-trigger {
+ &-con {
+ position: absolute;
+ transform: translate(-50%, -50%);
+ z-index: 10;
+ }
+ &-bar-con {
+ position: absolute;
+ overflow: hidden;
+ &.vertical {
+ left: @trigger-bar-offset;
+ top: 50%;
+ height: @trigger-bar-con-height;
+ transform: translate(0, -50%);
+ }
+ &.horizontal {
+ left: 50%;
+ top: @trigger-bar-offset;
+ width: @trigger-bar-con-height;
+ transform: translate(-50%, 0);
+ }
+ }
+ &-vertical {
+ width: @trigger-width;
+ height: 100%;
+ background: @trigger-background;
+ box-shadow: @box-shadow;
+ cursor: col-resize;
+ .@{split-prefix-cls}-trigger-bar {
+ width: @trigger-bar-width;
+ height: 1px;
+ background: @trigger-bar-background;
+ float: left;
+ margin-top: @trigger-bar-interval;
+ }
+ }
+ &-horizontal {
+ height: @trigger-width;
+ width: 100%;
+ background: @trigger-background;
+ box-shadow: @box-shadow;
+ cursor: row-resize;
+ .@{split-prefix-cls}-trigger-bar {
+ height: @trigger-bar-width;
+ width: 1px;
+ background: @trigger-bar-background;
+ float: left;
+ margin-right: @trigger-bar-interval;
+ }
+ }
}
- &.top-pane, &.bottom-pane{
- left: 0px;
- right: 0px;
+ &-horizontal {
+ .@{split-prefix-cls}-trigger-con {
+ top: 50%;
+ height: 100%;
+ width: 0;
+ }
}
- &.top-pane{
- top: 0px;
+ &-vertical {
+ .@{split-prefix-cls}-trigger-con {
+ left: 50%;
+ height: 0;
+ width: 100%;
+ }
}
- &.bottom-pane{
- bottom: 0px;
+ .no-select {
+ -webkit-touch-callout: none;
+ -webkit-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ user-select: none;
}
- }
- &-trigger{
- &-con{
- position: absolute;
- transform: translate(-50%, -50%);
- z-index: 10;
- }
- &-bar-con{
- position: absolute;
- overflow: hidden;
- &.vertical{
- left: @trigger-bar-offset;
- top: 50%;
- height: @trigger-bar-con-height;
- transform: translate(0, -50%);
- }
- &.horizontal{
- left: 50%;
- top: @trigger-bar-offset;
- width: @trigger-bar-con-height;
- transform: translate(-50%, 0);
- }
- }
- &-vertical{
- width: @trigger-width;
- height: 100%;
- background: @trigger-background;
- box-shadow: @box-shadow;
- cursor: col-resize;
- .@{split-prefix-cls}-trigger-bar{
- width: @trigger-bar-width;
- height: 1px;
- background: @trigger-bar-background;
- float: left;
- margin-top: @trigger-bar-interval;
- }
- }
- &-horizontal{
- height: @trigger-width;
- width: 100%;
- background: @trigger-background;
- box-shadow: @box-shadow;
- cursor: row-resize;
- .@{split-prefix-cls}-trigger-bar{
- height: @trigger-bar-width;
- width: 1px;
- background: @trigger-bar-background;
- float: left;
- margin-right: @trigger-bar-interval;
- }
- }
- }
- &-horizontal{
- .@{split-prefix-cls}-trigger-con{
- top: 50%;
- height: 100%;
- width: 0;
- }
- }
- &-vertical{
- .@{split-prefix-cls}-trigger-con{
- left: 50%;
- height: 0;
- width: 100%;
- }
- }
- .no-select{
- -webkit-touch-callout: none;
- -webkit-user-select: none;
- -khtml-user-select: none;
- -moz-user-select: none;
- -ms-user-select: none;
- user-select: none;
- }
}