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
| <template>
| <div class="dragHandle shadow-t" @mouseup="dragUp"></div>
| <div class="dragHandle shadow-r" @mouseup="dragUp"></div>
| <div class="dragHandle shadow-b" @mouseup="dragUp"></div>
| <div class="dragHandle shadow-l" @mouseup="dragUp"></div>
| </template>
|
| <script setup lang="ts">
| import { nextTick, toRefs } from 'vue'
| import eventBus from '@/utils/eventBus'
| import { dvMainStoreWithOut } from '@/store/modules/data-visualization/dvMain'
| const dvMainStore = dvMainStoreWithOut()
|
| const props = defineProps({
| item: {
| required: true,
| type: Object,
| default() {
| return {
| component: null,
| propValue: null,
| request: null,
| linkage: null,
| type: null,
| events: null,
| style: null,
| id: null
| }
| }
| },
| index: {
| required: true,
| type: [Number, String],
| default: 0
| }
| })
|
| const { item, index } = toRefs(props)
|
| const dragUp = () => {
| // 将当前点击组件的事件传播出去
| nextTick(() => eventBus.emit('componentClick'))
| dvMainStore.setInEditorStatus(true)
| dvMainStore.setClickComponentStatus(true)
| dvMainStore.setCurComponent({ component: item.value, index: index.value })
| }
| </script>
|
| <style lang="less" scoped>
| .dragHandle {
| position: absolute;
| z-index: 20;
| cursor: move;
| }
| .shadow-t {
| width: 100%;
| height: 10px;
| left: 0;
| top: 0;
| }
| .shadow-r {
| width: 10px;
| height: calc(100% - 15px);
| right: 0;
| top: 0;
| }
| .shadow-b {
| width: calc(100% - 15px);
| height: 10px;
| left: 0;
| bottom: 0;
| }
| .shadow-l {
| width: 10px;
| height: 100%;
| left: 0;
| top: 0;
| }
| </style>
|
|
