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 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 | 7x 7x 7x 148x 7x 7x 148x 148x 148x | <template> <div :class="$style.root" :style="currentStyle" v-show="currentStyle"> <div :class="$style.line" :style="lineStyle" v-show="lineStyle"></div> <div :class="$style.mask" :style="maskStyle" v-show="maskStyle"></div> </div> </template> <script> export default { name: 'u-table-view-drop-ghost', props: { data: Object, }, data() { return { currentStyle: undefined, lineStyle: undefined, maskStyle: undefined, next: undefined, }; }, watch: { data: { handler(value) { if (!value || !value.position) { this.currentStyle = undefined; this.lineStyle = undefined; this.maskStyle = undefined; return; } const rect = value.dragoverElRect; if (!rect) return; const parentElRect = value.parentElRect; this.currentStyle = { left: '0px', top: rect.top - parentElRect.top + 'px', width: parentElRect.width + 'px', height: rect.height + 'px', }; this.lineStyle = undefined; this.maskStyle = undefined; const left = value.left || 0; if (value.position === 'insertBefore') { this.lineStyle = { left: left + 'px', top: '0px', // right: rect.right - scrollRect.right + 'px', right: '0px', }; } else if (value.position === 'insertAfter') { this.lineStyle = { left: left + 'px', top: rect.height + 'px', right: '0px', }; } else if (value.position === 'append') { this.maskStyle = { top: '0px', height: rect.height + 'px', left: '0px', right: '0px', }; } }, }, }, }; </script> <style module> .root { position: absolute; pointer-events: none; z-index: 999; } .line { position: absolute; border: 1px solid var(--table-view-drop-ghost-border-color); } .line::before { content: ''; display: inline-block; width: 0; height: 0; border: 4px solid transparent; border-left: 8px solid var(--table-view-drop-ghost-border-color); position: absolute; left: -1px; top: -4px; } .line::after { content: ''; display: inline-block; width: 0; height: 0; border: 4px solid transparent; border-right: 8px solid var(--table-view-drop-ghost-border-color); position: absolute; right: -1px; top: -4px; } .line[disablednext] { border-color: var(--table-view-drop-ghost-disabled-border-color); } .line[disablednext]::before { border-left-color: var(--table-view-drop-ghost-disabled-border-color); } .line[disablednext]::after { border-right-color: var(--table-view-drop-ghost-disabled-border-color); } .mask { position: absolute; height: 0; background: var(--table-view-drop-ghost-mask-background); border: 1px dashed var(--table-view-drop-ghost-border-color); } </style> |