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

Split code format

Browse source
This commit is contained in:
梁灏 2018-06-30 16:06:25 +08:00
parent 8fe474b951
commit cd397a6f46
3 changed files with 245 additions and 236 deletions
Download patch file Download diff file Expand all files Collapse all files

1
examples/routers/split.vue
View file

@ -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 {

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

@ -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>