update Split
This commit is contained in:
梁灏
parent
cd397a6f46
commit
1e9bece0c1
3 changed files with 129 additions and 112 deletions
|
|
@ -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>
|
||||
|
|
@ -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';
|
||||
},
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue