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