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>
|
<template>
|
||||||
<div class="split-pane-page-wrapper">
|
<div class="demo-split">
|
||||||
<Split v-model="offset" @on-moving="handleMoving">
|
<Split v-model="split1">
|
||||||
<div slot="left" class="pane left-pane">
|
<div slot="left" class="demo-split-pane">
|
||||||
<Split v-model="offsetVertical" mode="vertical" @on-moving="handleMoving">
|
左边面板
|
||||||
<div slot="top" class="pane top-pane"></div>
|
</div>
|
||||||
<div slot="bottom" class="pane bottom-pane"></div>
|
<div slot="right" class="demo-split-pane">
|
||||||
<div slot="trigger" class="custom-trigger">
|
右边面板
|
||||||
<Icon class="trigger-icon" :size="22" type="android-more-vertical" color="#000000"/>
|
|
||||||
</div>
|
|
||||||
</Split>
|
|
||||||
</div>
|
</div>
|
||||||
<div slot="right" class="pane right-pane"></div>
|
|
||||||
</Split>
|
</Split>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
@ -21,7 +17,8 @@
|
||||||
data () {
|
data () {
|
||||||
return {
|
return {
|
||||||
offset: 0.6,
|
offset: 0.6,
|
||||||
offsetVertical: '250px'
|
offsetVertical: '250px',
|
||||||
|
split1: 0.5
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
|
|
@ -73,3 +70,9 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
<style>
|
||||||
|
.demo-split{
|
||||||
|
height: 300px;
|
||||||
|
border: 1px solid #dddee1;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -1,7 +1,7 @@
|
||||||
<template>
|
<template>
|
||||||
<div ref="outerWrapper" :class="wrapperClasses">
|
<div ref="outerWrapper" :class="wrapperClasses">
|
||||||
<div v-if="isHorizontal" :class="`${prefix}-horizontal`">
|
<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"/>
|
<slot name="left"/>
|
||||||
</div>
|
</div>
|
||||||
<div :class="`${prefix}-trigger-con`" :style="{left: `${offset}%`}" @mousedown="handleMousedown">
|
<div :class="`${prefix}-trigger-con`" :style="{left: `${offset}%`}" @mousedown="handleMousedown">
|
||||||
|
|
@ -9,12 +9,12 @@
|
||||||
<trigger mode="vertical"/>
|
<trigger mode="vertical"/>
|
||||||
</slot>
|
</slot>
|
||||||
</div>
|
</div>
|
||||||
<div :style="{left: `${offset}%`}" :class="[`${prefix}-pane`, 'right-pane']">
|
<div :style="{left: `${offset}%`}" class="right-pane" :class="paneClasses">
|
||||||
<slot name="right"/>
|
<slot name="right"/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div v-else :class="`${prefix}-vertical`">
|
<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"/>
|
<slot name="top"/>
|
||||||
</div>
|
</div>
|
||||||
<div :class="`${prefix}-trigger-con`" :style="{top: `${offset}%`}" @mousedown="handleMousedown">
|
<div :class="`${prefix}-trigger-con`" :style="{top: `${offset}%`}" @mousedown="handleMousedown">
|
||||||
|
|
@ -22,7 +22,7 @@
|
||||||
<trigger mode="horizontal"/>
|
<trigger mode="horizontal"/>
|
||||||
</slot>
|
</slot>
|
||||||
</div>
|
</div>
|
||||||
<div :style="{top: `${offset}%`}" :class="[`${prefix}-pane`, 'bottom-pane']">
|
<div :style="{top: `${offset}%`}" class="bottom-pane" :class="paneClasses">
|
||||||
<slot name="bottom"/>
|
<slot name="bottom"/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -79,6 +79,14 @@
|
||||||
this.isMoving ? 'no-select' : ''
|
this.isMoving ? 'no-select' : ''
|
||||||
];
|
];
|
||||||
},
|
},
|
||||||
|
paneClasses () {
|
||||||
|
return [
|
||||||
|
`${this.prefix}-pane`,
|
||||||
|
{
|
||||||
|
[`${this.prefix}-pane-moving`]: this.isMoving
|
||||||
|
}
|
||||||
|
];
|
||||||
|
},
|
||||||
isHorizontal () {
|
isHorizontal () {
|
||||||
return this.mode === 'horizontal';
|
return this.mode === 'horizontal';
|
||||||
},
|
},
|
||||||
|
|
|
||||||
|
|
@ -9,106 +9,112 @@
|
||||||
@trigger-bar-weight: 1px;
|
@trigger-bar-weight: 1px;
|
||||||
@trigger-bar-con-height: (@trigger-bar-weight + @trigger-bar-interval) * 8;
|
@trigger-bar-con-height: (@trigger-bar-weight + @trigger-bar-interval) * 8;
|
||||||
|
|
||||||
.@{split-prefix-cls}{
|
.@{split-prefix-cls} {
|
||||||
&-wrapper{
|
&-wrapper {
|
||||||
position: relative;
|
position: relative;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
}
|
|
||||||
&-pane{
|
|
||||||
position: absolute;
|
|
||||||
&.left-pane, &.right-pane{
|
|
||||||
top: 0px;
|
|
||||||
bottom: 0px;
|
|
||||||
}
|
}
|
||||||
&.left-pane{
|
&-pane {
|
||||||
left: 0px;
|
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{
|
&-trigger {
|
||||||
right: 0px;
|
&-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{
|
&-horizontal {
|
||||||
left: 0px;
|
.@{split-prefix-cls}-trigger-con {
|
||||||
right: 0px;
|
top: 50%;
|
||||||
|
height: 100%;
|
||||||
|
width: 0;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
&.top-pane{
|
&-vertical {
|
||||||
top: 0px;
|
.@{split-prefix-cls}-trigger-con {
|
||||||
|
left: 50%;
|
||||||
|
height: 0;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
&.bottom-pane{
|
.no-select {
|
||||||
bottom: 0px;
|
-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
Reference in a new issue