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