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
| <template>
| <div class="shadow-main" :style="shadowStyle">
| <div class="shadow-background"></div>
| </div>
| </template>
|
| <script setup lang="ts">
| import { computed, toRefs } from 'vue'
| const props = defineProps({
| baseWidth: {
| required: true,
| type: Number
| },
| baseHeight: {
| required: true,
| type: Number
| },
| curGap: {
| required: true,
| type: Number
| },
| element: {
| required: true,
| type: Object,
| default() {
| return {
| component: null,
| propValue: null,
| request: null,
| linkage: null,
| type: null,
| events: null,
| style: null,
| id: null
| }
| }
| }
| })
|
| const { element, baseWidth, baseHeight, curGap } = toRefs(props)
|
| const shadowStyle = computed(() => {
| const { x, y, sizeX, sizeY } = element.value
| return {
| padding: curGap.value + 'px',
| width: sizeX * baseWidth.value + 'px',
| height: sizeY * baseHeight.value + 'px',
| left: (x - 1) * baseWidth.value + 'px',
| top: (y - 1) * baseHeight.value - 3 + 'px'
| }
| })
| </script>
|
| <style lang="less" scoped>
| .shadow-main {
| position: absolute;
| transition: all 0.1s;
| }
| .shadow-background {
| width: 100%;
| height: 100%;
| background-color: #b8d3f9;
| }
| </style>
|
|
