Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 | 7x 7x 7x 7x | <template>
<div :class="$style.root" :direction="parentVM.direction" :style="{
width: parentVM.direction === 'horizontal' ? computedSize + 'px' : undefined,
height: parentVM.direction === 'vertical' ? computedSize + 'px' : undefined,
}">
<slot></slot>
<f-dragger v-if="parentVM.resizable && !isLast" :axis="parentVM.direction"
@dragstart="callParent('onResizerDragStart', $event)"
@drag="callParent('onResizerDrag', $event)"
@dragend="callParent('onResizerDragEnd', $event)">
<div :class="$style.splitter" @click.stop></div>
</f-dragger>
</div>
</template>
<script>
import { MChild } from '../m-parent.vue';
export default {
name: 'u-split-layout-item',
parentName: 'u-split-layout',
mixins: [MChild],
props: {
size: [String, Number],
minSize: { type: Number },
},
data() {
return {
currentSize: this.size === undefined ? undefined : this.size + '',
computedSize: undefined,
};
},
computed: {
isLast() {
const index = this.parentVM.itemVMs.indexOf(this);
return ~index && index === this.parentVM.itemVMs.length - 1;
},
},
watch: {
size(size) {
this.currentSize = size === undefined ? undefined : size + '';
this.parentVM.handleResize();
},
},
methods: {
callParent(methodName, $event) {
return this.parentVM[methodName]($event, this);
},
},
};
</script>
<style module>
.root {
position: relative;
overflow: hidden;
}
.root[direction="horizontal"] {
float: left;
height: 100%;
}
.splitter {
position: absolute;
background: transparent; /* var(--border-color-base); */
transition: background var(--transition-duration-base);
}
.root[direction="horizontal"] > .splitter {
width: 0;
top: 0;
bottom: 0;
right: 0;
padding: 0 2px;
cursor: col-resize;
}
.root[direction="vertical"] > .splitter {
height: 0;
left: 0;
right: 0;
padding: 2px 0;
bottom: 0;
cursor: row-resize;
z-index: 10;
}
.splitter:hover {
background: var(--brand-primary);
}
</style>
|