drip-public/iview
5
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

update Split

Browse source
This commit is contained in:
梁灏 2018-06-30 16:23:52 +08:00
parent cd397a6f46
commit 1e9bece0c1
3 changed files with 129 additions and 112 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

25
examples/routers/split.vue
View file

@ -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 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> </div>
</Split> <div slot="right" class="demo-split-pane">
右边面板
</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>

16
src/components/split/split.vue
View file

@ -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';
}, },

70
src/styles/components/split.less
View file

@ -9,64 +9,71 @@
@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{ &-pane {
position: absolute; position: absolute;
&.left-pane, &.right-pane{ &.left-pane, &.right-pane {
top: 0px; top: 0;
bottom: 0px; bottom: 0;
} }
&.left-pane{ &.left-pane {
left: 0px; left: 0;
} }
&.right-pane{ &.right-pane {
right: 0px; right: 0;
} }
&.top-pane, &.bottom-pane{ &.top-pane, &.bottom-pane {
left: 0px; left: 0;
right: 0px; right: 0;
} }
&.top-pane{ &.top-pane {
top: 0px; top: 0;
} }
&.bottom-pane{ &.bottom-pane {
bottom: 0px; bottom: 0;
}
&-moving{
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
} }
} }
&-trigger{ &-trigger {
&-con{ &-con {
position: absolute; position: absolute;
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
z-index: 10; z-index: 10;
} }
&-bar-con{ &-bar-con {
position: absolute; position: absolute;
overflow: hidden; overflow: hidden;
&.vertical{ &.vertical {
left: @trigger-bar-offset; left: @trigger-bar-offset;
top: 50%; top: 50%;
height: @trigger-bar-con-height; height: @trigger-bar-con-height;
transform: translate(0, -50%); transform: translate(0, -50%);
} }
&.horizontal{ &.horizontal {
left: 50%; left: 50%;
top: @trigger-bar-offset; top: @trigger-bar-offset;
width: @trigger-bar-con-height; width: @trigger-bar-con-height;
transform: translate(-50%, 0); transform: translate(-50%, 0);
} }
} }
&-vertical{ &-vertical {
width: @trigger-width; width: @trigger-width;
height: 100%; height: 100%;
background: @trigger-background; background: @trigger-background;
box-shadow: @box-shadow; box-shadow: @box-shadow;
cursor: col-resize; cursor: col-resize;
.@{split-prefix-cls}-trigger-bar{ .@{split-prefix-cls}-trigger-bar {
width: @trigger-bar-width; width: @trigger-bar-width;
height: 1px; height: 1px;
background: @trigger-bar-background; background: @trigger-bar-background;
@ -74,13 +81,13 @@
margin-top: @trigger-bar-interval; margin-top: @trigger-bar-interval;
} }
} }
&-horizontal{ &-horizontal {
height: @trigger-width; height: @trigger-width;
width: 100%; width: 100%;
background: @trigger-background; background: @trigger-background;
box-shadow: @box-shadow; box-shadow: @box-shadow;
cursor: row-resize; cursor: row-resize;
.@{split-prefix-cls}-trigger-bar{ .@{split-prefix-cls}-trigger-bar {
height: @trigger-bar-width; height: @trigger-bar-width;
width: 1px; width: 1px;
background: @trigger-bar-background; background: @trigger-bar-background;
@ -89,24 +96,23 @@
} }
} }
} }
&-horizontal{ &-horizontal {
.@{split-prefix-cls}-trigger-con{ .@{split-prefix-cls}-trigger-con {
top: 50%; top: 50%;
height: 100%; height: 100%;
width: 0; width: 0;
} }
} }
&-vertical{ &-vertical {
.@{split-prefix-cls}-trigger-con{ .@{split-prefix-cls}-trigger-con {
left: 50%; left: 50%;
height: 0; height: 0;
width: 100%; width: 100%;
} }
} }
.no-select{ .no-select {
-webkit-touch-callout: none; -webkit-touch-callout: none;
-webkit-user-select: none; -webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none; -moz-user-select: none;
-ms-user-select: none; -ms-user-select: none;
user-select: none; user-select: none;