Split code format
This commit is contained in:
parent
8fe474b951
commit
cd397a6f46
3 changed files with 245 additions and 236 deletions
|
@ -39,6 +39,7 @@ export default {
|
||||||
top: 50%;
|
top: 50%;
|
||||||
transform: translate(-50%, -50%);
|
transform: translate(-50%, -50%);
|
||||||
}
|
}
|
||||||
|
|
||||||
.split-pane-page-wrapper {
|
.split-pane-page-wrapper {
|
||||||
height: 600px;
|
height: 600px;
|
||||||
.pane {
|
.pane {
|
||||||
|
|
|
@ -1,22 +1,30 @@
|
||||||
<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']"><slot name="left"/></div>
|
<div :style="{right: `${anotherOffset}%`}" :class="[`${prefix}-pane`, 'left-pane']">
|
||||||
|
<slot name="left"/>
|
||||||
|
</div>
|
||||||
<div :class="`${prefix}-trigger-con`" :style="{left: `${offset}%`}" @mousedown="handleMousedown">
|
<div :class="`${prefix}-trigger-con`" :style="{left: `${offset}%`}" @mousedown="handleMousedown">
|
||||||
<slot name="trigger">
|
<slot name="trigger">
|
||||||
<trigger mode="vertical"/>
|
<trigger mode="vertical"/>
|
||||||
</slot>
|
</slot>
|
||||||
</div>
|
</div>
|
||||||
<div :style="{left: `${offset}%`}" :class="[`${prefix}-pane`, 'right-pane']"><slot name="right"/></div>
|
<div :style="{left: `${offset}%`}" :class="[`${prefix}-pane`, 'right-pane']">
|
||||||
|
<slot name="right"/>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div v-else :class="`${prefix}-vertical`">
|
<div v-else :class="`${prefix}-vertical`">
|
||||||
<div :style="{bottom: `${anotherOffset}%`}" :class="[`${prefix}-pane`, 'top-pane']"><slot name="top"/></div>
|
<div :style="{bottom: `${anotherOffset}%`}" :class="[`${prefix}-pane`, 'top-pane']">
|
||||||
|
<slot name="top"/>
|
||||||
|
</div>
|
||||||
<div :class="`${prefix}-trigger-con`" :style="{top: `${offset}%`}" @mousedown="handleMousedown">
|
<div :class="`${prefix}-trigger-con`" :style="{top: `${offset}%`}" @mousedown="handleMousedown">
|
||||||
<slot name="trigger">
|
<slot name="trigger">
|
||||||
<trigger mode="horizontal"/>
|
<trigger mode="horizontal"/>
|
||||||
</slot>
|
</slot>
|
||||||
</div>
|
</div>
|
||||||
<div :style="{top: `${offset}%`}" :class="[`${prefix}-pane`, 'bottom-pane']"><slot name="bottom"/></div>
|
<div :style="{top: `${offset}%`}" :class="[`${prefix}-pane`, 'bottom-pane']">
|
||||||
|
<slot name="bottom"/>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue