drip-public/iview
6
1
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
Show stats Download patch file Download diff file Expand all files Collapse all files

27
examples/routers/split.vue
View file

@ -16,7 +16,7 @@
</template> </template>
<script> <script>
export default { export default {
name: 'split_pane_page', name: 'split_pane_page',
data () { data () {
return { return {
@ -29,35 +29,36 @@ export default {
console.log(e.atMin, e.atMax) console.log(e.atMin, e.atMax)
} }
} }
} }
</script> </script>
<style lang="less"> <style lang="less">
.center-middle{ .center-middle {
position: absolute; position: absolute;
left: 50%; left: 50%;
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 {
width: 100%; width: 100%;
height: 100%; height: 100%;
&.left-pane{ &.left-pane {
background: sandybrown; background: sandybrown;
} }
&.right-pane{ &.right-pane {
background: palevioletred; background: palevioletred;
} }
&.top-pane{ &.top-pane {
background: sandybrown; background: sandybrown;
} }
&.bottom-pane{ &.bottom-pane {
background: palevioletred; background: palevioletred;
} }
} }
.custom-trigger{ .custom-trigger {
width: 20px; width: 20px;
height: 20px; height: 20px;
border-radius: 50%; border-radius: 50%;
@ -66,9 +67,9 @@ export default {
.center-middle; .center-middle;
box-shadow: 0 0 6px 0 rgba(28, 36, 56, 0.4); box-shadow: 0 0 6px 0 rgba(28, 36, 56, 0.4);
cursor: row-resize; cursor: row-resize;
i.trigger-icon{ i.trigger-icon {
.center-middle; .center-middle;
} }
} }
} }
</style> </style>

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

@ -1,31 +1,39 @@
<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>
<script> <script>
import { oneOf } from '../../utils/assist'; import {oneOf} from '../../utils/assist';
import { on, off } from '../../utils/dom'; import {on, off} from '../../utils/dom';
import Trigger from './trigger.vue'; import Trigger from './trigger.vue';
export default { export default {
name: 'Split', name: 'Split',
components: { components: {
Trigger Trigger
@ -151,5 +159,5 @@ export default {
this.offset = (this.valueIsPx ? this.px2percent(this.value, this.$refs.outerWrapper[this.offsetSize]) : this.value) * 10000 / 100; this.offset = (this.valueIsPx ? this.px2percent(this.value, this.$refs.outerWrapper[this.offsetSize]) : this.value) * 10000 / 100;
}); });
} }
}; };
</script> </script>

4
src/components/split/trigger.vue
View file

@ -7,7 +7,7 @@
</template> </template>
<script> <script>
export default { export default {
name: 'Trigger', name: 'Trigger',
props: { props: {
mode: String mode: String
@ -35,5 +35,5 @@ export default {
]; ];
} }
} }
}; };
</script> </script>