@dolphinweex/weex-harmony 0.1.60 → 0.1.61
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/package.json +1 -1
- package/src/components/midea-ipc-drag-list-view.vue +553 -0
- package/src/index.js +5 -0
- package/src/transform-loader.js +12 -8
- package/src/.DS_Store +0 -0
- package/src/components/.DS_Store +0 -0
package/package.json
CHANGED
|
@@ -0,0 +1,553 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<div>
|
|
3
|
+
<div
|
|
4
|
+
class="ipc-drag-container"
|
|
5
|
+
:class="{ editing: isEditing }"
|
|
6
|
+
:style="{
|
|
7
|
+
marginTop: (scalePx(data.topMargin , 0)) + 'px'
|
|
8
|
+
}"
|
|
9
|
+
ref="containerRef"
|
|
10
|
+
>
|
|
11
|
+
<transition-group
|
|
12
|
+
name="grid-fade"
|
|
13
|
+
tag="div"
|
|
14
|
+
class="grid"
|
|
15
|
+
:style="{
|
|
16
|
+
gridTemplateColumns: 'repeat(' + (data.spanCount || 2) + ', 1fr)',
|
|
17
|
+
columnGap: ( scalePx(data.horizontalSpanPadding, 8)) + 'px',
|
|
18
|
+
rowGap: (scalePx(data.verticalSpanPadding , 12)) + 'px'
|
|
19
|
+
}"
|
|
20
|
+
>
|
|
21
|
+
<div
|
|
22
|
+
v-for="(item, index) in data.list"
|
|
23
|
+
:key="item.id"
|
|
24
|
+
class="grid-item"
|
|
25
|
+
:class="{
|
|
26
|
+
'being-dragged': draggingIndex === index,
|
|
27
|
+
hidden: isDragClone && draggingIndex === index,
|
|
28
|
+
disabled: item.disabled === true
|
|
29
|
+
}"
|
|
30
|
+
:data-index="index"
|
|
31
|
+
@touchstart="(e) => onTouchStart(e, index)"
|
|
32
|
+
@touchmove="onTouchMove"
|
|
33
|
+
@touchend="onTouchEnd"
|
|
34
|
+
@touchcancel="onTouchEnd"
|
|
35
|
+
@click.stop.prevent="() => onItemClick(item, index)"
|
|
36
|
+
>
|
|
37
|
+
<div class="box" :class="{ shaking: isEditing }">
|
|
38
|
+
<div class="thumb-wrap">
|
|
39
|
+
<img class="thumb" :src="item.imageSrc" alt="" />
|
|
40
|
+
<button class="delete-btn"
|
|
41
|
+
:style="{ fontSize : data.deleteBtnSize && data.deleteBtnSize * 4 || 16 * 4 }"
|
|
42
|
+
@click.stop="onDelete(index, item)">×</button>
|
|
43
|
+
</div>
|
|
44
|
+
<div
|
|
45
|
+
class="label-row"
|
|
46
|
+
:style="{
|
|
47
|
+
marginTop: scalePx(data.labelTextMarginTop, 8) + 'px'
|
|
48
|
+
}"
|
|
49
|
+
>
|
|
50
|
+
<div
|
|
51
|
+
class="label"
|
|
52
|
+
:style="{
|
|
53
|
+
fontSize: scalePx(data.labelTextSize, 12) + 'px',
|
|
54
|
+
color: data.labelTextColor || '#666'
|
|
55
|
+
}"
|
|
56
|
+
>
|
|
57
|
+
{{ item.label }}
|
|
58
|
+
</div>
|
|
59
|
+
<button
|
|
60
|
+
class="edit-btn"
|
|
61
|
+
@click.stop.prevent="() => onEditClick(item, index)"
|
|
62
|
+
>
|
|
63
|
+
<img
|
|
64
|
+
class="edit-icon"
|
|
65
|
+
:src="'data:image/png;base64,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'"
|
|
66
|
+
:style="{ width: scalePx(data.editBtnSize, 24) + 'px', height: scalePx(data.editBtnSize, 24) + 'px' }"
|
|
67
|
+
alt="编辑"
|
|
68
|
+
/>
|
|
69
|
+
</button>
|
|
70
|
+
</div>
|
|
71
|
+
</div>
|
|
72
|
+
</div>
|
|
73
|
+
</transition-group>
|
|
74
|
+
</div>
|
|
75
|
+
|
|
76
|
+
<!-- 编辑名称弹窗 -->
|
|
77
|
+
<div v-if="showEditDialog" class="modal-mask">
|
|
78
|
+
<div class="modal">
|
|
79
|
+
<div class="modal-title">当前视角名称</div>
|
|
80
|
+
<input
|
|
81
|
+
class="modal-input"
|
|
82
|
+
v-model="editInputValue"
|
|
83
|
+
:placeholder="data.inputPlaceholder || ''"
|
|
84
|
+
/>
|
|
85
|
+
<div class="modal-actions">
|
|
86
|
+
<text class="btn cancel" @click="onEditCancel">取消</text>
|
|
87
|
+
<div class="btn-divider"></div>
|
|
88
|
+
<text class="btn confirm" @click="onEditConfirm">确认</text>
|
|
89
|
+
</div>
|
|
90
|
+
</div>
|
|
91
|
+
</div>
|
|
92
|
+
</div>
|
|
93
|
+
</template>
|
|
94
|
+
|
|
95
|
+
<script>
|
|
96
|
+
export default {
|
|
97
|
+
name: 'midea-ipc-drag-list-view',
|
|
98
|
+
props: {
|
|
99
|
+
data: {
|
|
100
|
+
type: Object,
|
|
101
|
+
required: true
|
|
102
|
+
}
|
|
103
|
+
},
|
|
104
|
+
data() {
|
|
105
|
+
return {
|
|
106
|
+
// 独立的编辑态
|
|
107
|
+
isEditing: false,
|
|
108
|
+
// 手势与状态
|
|
109
|
+
longPressTimer: null,
|
|
110
|
+
longPressDuration: 350,
|
|
111
|
+
isTouchDragging: false,
|
|
112
|
+
draggingIndex: null,
|
|
113
|
+
// 拖拽克隆
|
|
114
|
+
isDragClone: false,
|
|
115
|
+
dragCloneEl: null,
|
|
116
|
+
dragCloneX: 0,
|
|
117
|
+
dragCloneY: 0,
|
|
118
|
+
targetTouchX: 0,
|
|
119
|
+
targetTouchY: 0,
|
|
120
|
+
touchStartX: 0,
|
|
121
|
+
touchStartY: 0,
|
|
122
|
+
// 移动阈值与滚动判定(对齐 drag-list-view 逻辑)
|
|
123
|
+
isScrolling: false,
|
|
124
|
+
scrollThreshold: 5,
|
|
125
|
+
longPressMoveThreshold: 8,
|
|
126
|
+
lastTouch: null,
|
|
127
|
+
touchOffsetX: 0,
|
|
128
|
+
touchOffsetY: 0,
|
|
129
|
+
// 布局缓存
|
|
130
|
+
containerRect: null,
|
|
131
|
+
itemWidth: 0,
|
|
132
|
+
itemHeight: 0,
|
|
133
|
+
// 动画帧
|
|
134
|
+
rafId: null,
|
|
135
|
+
// 交换频率控制
|
|
136
|
+
lastSwapTime: 0,
|
|
137
|
+
// 编辑弹窗
|
|
138
|
+
showEditDialog: false,
|
|
139
|
+
editInputValue: '',
|
|
140
|
+
editIndex: null,
|
|
141
|
+
scale: weex.config.env.scale
|
|
142
|
+
};
|
|
143
|
+
},
|
|
144
|
+
mounted() {
|
|
145
|
+
this.$nextTick(() => {
|
|
146
|
+
this.measureItemSize();
|
|
147
|
+
});
|
|
148
|
+
},
|
|
149
|
+
methods: {
|
|
150
|
+
scalePx(value , defaultVal){
|
|
151
|
+
return value ? value /this.scale : defaultVal /this.scale
|
|
152
|
+
},
|
|
153
|
+
measureItemSize() {
|
|
154
|
+
const gridItem = this.$el.querySelector('.grid-item');
|
|
155
|
+
if (gridItem) {
|
|
156
|
+
const rect = gridItem.getBoundingClientRect();
|
|
157
|
+
this.itemWidth = rect.width;
|
|
158
|
+
this.itemHeight = rect.height;
|
|
159
|
+
}
|
|
160
|
+
const container = this.$refs.containerRef;
|
|
161
|
+
if (container) {
|
|
162
|
+
this.containerRect = container.getBoundingClientRect();
|
|
163
|
+
}
|
|
164
|
+
},
|
|
165
|
+
|
|
166
|
+
onItemClick(item, index) {
|
|
167
|
+
if (this.isTouchDragging || this.longPressTimer || this.secondLongPressTimer) return;
|
|
168
|
+
this.$emit('onClickEvent', { item, index });
|
|
169
|
+
},
|
|
170
|
+
|
|
171
|
+
onEditClick(item, index) {
|
|
172
|
+
// 点击编辑按钮:弹出编辑名称对话框
|
|
173
|
+
this.editIndex = index;
|
|
174
|
+
this.editInputValue = item && item.label || '';
|
|
175
|
+
this.showEditDialog = true;
|
|
176
|
+
},
|
|
177
|
+
onEditCancel() {
|
|
178
|
+
this.showEditDialog = false;
|
|
179
|
+
this.editInputValue = '';
|
|
180
|
+
this.editIndex = null;
|
|
181
|
+
},
|
|
182
|
+
onEditConfirm() {
|
|
183
|
+
if (this.editIndex !== null && this.data.list && this.data.list[this.editIndex]) {
|
|
184
|
+
const newLabel = (this.editInputValue || '').trim();
|
|
185
|
+
// 更新 label
|
|
186
|
+
this.$set(this.data.list[this.editIndex], 'label', newLabel);
|
|
187
|
+
// 通知外部(可选)
|
|
188
|
+
this.$emit('onLabelEdited', { index: this.editIndex, label: newLabel, item: this.data.list[this.editIndex] });
|
|
189
|
+
}
|
|
190
|
+
this.showEditDialog = false;
|
|
191
|
+
this.editInputValue = '';
|
|
192
|
+
this.editIndex = null;
|
|
193
|
+
},
|
|
194
|
+
|
|
195
|
+
onDelete(item, index) {
|
|
196
|
+
this.$emit('onDeleteEvent', { item, index });
|
|
197
|
+
// 默认本地也删除
|
|
198
|
+
this.data.list.splice(index, 1);
|
|
199
|
+
this.$nextTick(this.measureItemSize);
|
|
200
|
+
},
|
|
201
|
+
|
|
202
|
+
onTouchStart(e, index) {
|
|
203
|
+
if (!e.changedTouches || e.changedTouches.length === 0) return;
|
|
204
|
+
this.measureItemSize();
|
|
205
|
+
const touch = e.changedTouches[0];
|
|
206
|
+
this.touchStartX = touch.pageX;
|
|
207
|
+
this.touchStartY = touch.pageY;
|
|
208
|
+
this.lastTouch = touch;
|
|
209
|
+
this.isScrolling = false;
|
|
210
|
+
|
|
211
|
+
// 与 drag-list-view 一致:统一使用一次长按回调
|
|
212
|
+
this.clearTimers();
|
|
213
|
+
this.longPressTimer = setTimeout(() => {
|
|
214
|
+
this.longPressTimer = null;
|
|
215
|
+
this.activateDragMode(index);
|
|
216
|
+
}, this.longPressDuration);
|
|
217
|
+
},
|
|
218
|
+
|
|
219
|
+
// 统一长按回调:未编辑 -> 进入抖动;已编辑 -> 进入拖拽
|
|
220
|
+
activateDragMode(index) {
|
|
221
|
+
if (this.isEditing) {
|
|
222
|
+
// 已在编辑态:直接进入拖拽
|
|
223
|
+
const touch = this.lastTouch;
|
|
224
|
+
if (!touch) return;
|
|
225
|
+
this.activateDrag(index, touch);
|
|
226
|
+
return;
|
|
227
|
+
}
|
|
228
|
+
// 未编辑态:进入抖动编辑(不开始拖拽)
|
|
229
|
+
this.isEditing = true;
|
|
230
|
+
// 如需通知外部可在此 emit 事件
|
|
231
|
+
},
|
|
232
|
+
|
|
233
|
+
activateDrag(index, touch) {
|
|
234
|
+
this.draggingIndex = index;
|
|
235
|
+
this.isTouchDragging = true;
|
|
236
|
+
|
|
237
|
+
const gridItems = this.$el.querySelectorAll('.grid-item');
|
|
238
|
+
const el = gridItems[index];
|
|
239
|
+
if (!el) return;
|
|
240
|
+
const rect = el.getBoundingClientRect();
|
|
241
|
+
|
|
242
|
+
// 计算触点相对元素左上角偏移
|
|
243
|
+
this.touchOffsetX = touch.pageX - rect.left;
|
|
244
|
+
this.touchOffsetY = touch.pageY - rect.top;
|
|
245
|
+
|
|
246
|
+
// 创建拖拽克隆
|
|
247
|
+
this.createDragClone(el, rect);
|
|
248
|
+
|
|
249
|
+
// 初始位置(相对容器)
|
|
250
|
+
this.containerRect = this.$refs.containerRef.getBoundingClientRect();
|
|
251
|
+
this.dragCloneX = rect.left - this.containerRect.left;
|
|
252
|
+
this.dragCloneY = rect.top - this.containerRect.top;
|
|
253
|
+
this.updateDragCloneStyle();
|
|
254
|
+
},
|
|
255
|
+
|
|
256
|
+
createDragClone(sourceEl, rect) {
|
|
257
|
+
this.destroyDragClone();
|
|
258
|
+
const clone = document.createElement('div');
|
|
259
|
+
clone.className = 'drag-clone';
|
|
260
|
+
clone.style.width = rect.width + 'px';
|
|
261
|
+
clone.style.height = rect.height + 'px';
|
|
262
|
+
clone.style.position = 'absolute';
|
|
263
|
+
clone.style.zIndex = '9999';
|
|
264
|
+
clone.style.pointerEvents = 'none';
|
|
265
|
+
clone.style.left = '0';
|
|
266
|
+
clone.style.top = '0';
|
|
267
|
+
clone.style.willChange = 'transform';
|
|
268
|
+
clone.style.transition = 'none';
|
|
269
|
+
clone.innerHTML = sourceEl.querySelector('.box').outerHTML;
|
|
270
|
+
this.$refs.containerRef.appendChild(clone);
|
|
271
|
+
this.dragCloneEl = clone;
|
|
272
|
+
this.isDragClone = true;
|
|
273
|
+
},
|
|
274
|
+
|
|
275
|
+
destroyDragClone() {
|
|
276
|
+
if (this.dragCloneEl && this.dragCloneEl.parentNode) {
|
|
277
|
+
this.dragCloneEl.parentNode.removeChild(this.dragCloneEl);
|
|
278
|
+
}
|
|
279
|
+
this.dragCloneEl = null;
|
|
280
|
+
this.isDragClone = false;
|
|
281
|
+
},
|
|
282
|
+
|
|
283
|
+
onTouchMove(e) {
|
|
284
|
+
// 长按判定阶段:控制移动阈值与滚动
|
|
285
|
+
if (!this.isTouchDragging && this.longPressTimer) {
|
|
286
|
+
const touch = e.changedTouches && e.changedTouches[0];
|
|
287
|
+
if (touch) {
|
|
288
|
+
const dx = Math.abs(touch.pageX - this.touchStartX);
|
|
289
|
+
const dy = Math.abs(touch.pageY - this.touchStartY);
|
|
290
|
+
// 垂直滚动判定优先
|
|
291
|
+
if (dy > this.scrollThreshold * 3) {
|
|
292
|
+
this.isScrolling = true;
|
|
293
|
+
clearTimeout(this.longPressTimer);
|
|
294
|
+
this.longPressTimer = null;
|
|
295
|
+
return;
|
|
296
|
+
}
|
|
297
|
+
// 超过阈值则取消长按
|
|
298
|
+
if (dx > this.longPressMoveThreshold || dy > this.longPressMoveThreshold) {
|
|
299
|
+
clearTimeout(this.longPressTimer);
|
|
300
|
+
this.longPressTimer = null;
|
|
301
|
+
return;
|
|
302
|
+
}
|
|
303
|
+
// 保持长按:阻止默认和冒泡,避免滚动打断
|
|
304
|
+
if (e.preventDefault) e.preventDefault();
|
|
305
|
+
if (e.stopPropagation) e.stopPropagation();
|
|
306
|
+
}
|
|
307
|
+
return;
|
|
308
|
+
}
|
|
309
|
+
|
|
310
|
+
if (!this.isTouchDragging) return;
|
|
311
|
+
const touch = e.changedTouches && e.changedTouches[0];
|
|
312
|
+
if (!touch) return;
|
|
313
|
+
|
|
314
|
+
// 目标位置(相对容器)
|
|
315
|
+
const targetX = touch.pageX - this.touchOffsetX - this.containerRect.left;
|
|
316
|
+
const targetY = touch.pageY - this.touchOffsetY - this.containerRect.top;
|
|
317
|
+
|
|
318
|
+
// 约束在容器内部
|
|
319
|
+
const maxX = this.containerRect.width - this.itemWidth;
|
|
320
|
+
const maxY = this.containerRect.height - this.itemHeight;
|
|
321
|
+
this.dragCloneX = Math.max(0, Math.min(targetX, maxX));
|
|
322
|
+
this.dragCloneY = Math.max(0, Math.min(targetY, maxY));
|
|
323
|
+
this.updateDragCloneStyle();
|
|
324
|
+
|
|
325
|
+
// 控制交换频率
|
|
326
|
+
const now = Date.now();
|
|
327
|
+
if (now - this.lastSwapTime > 120) {
|
|
328
|
+
this.lastSwapTime = now;
|
|
329
|
+
this.maybeSwapByPosition(touch.pageX, touch.pageY);
|
|
330
|
+
}
|
|
331
|
+
},
|
|
332
|
+
|
|
333
|
+
updateDragCloneStyle() {
|
|
334
|
+
if (!this.dragCloneEl) return;
|
|
335
|
+
this.dragCloneEl.style.transform = `translate(${this.dragCloneX}px, ${this.dragCloneY}px)`;
|
|
336
|
+
},
|
|
337
|
+
|
|
338
|
+
onTouchEnd() {
|
|
339
|
+
this.clearTimers();
|
|
340
|
+
if (this.isTouchDragging) {
|
|
341
|
+
const idx = this.draggingIndex;
|
|
342
|
+
this.isTouchDragging = false;
|
|
343
|
+
this.draggingIndex = null;
|
|
344
|
+
this.destroyDragClone();
|
|
345
|
+
this.$emit('onDragEndEvent', { list: this.data.list, index: idx });
|
|
346
|
+
}
|
|
347
|
+
},
|
|
348
|
+
|
|
349
|
+
clearTimers() {
|
|
350
|
+
if (this.longPressTimer) {
|
|
351
|
+
clearTimeout(this.longPressTimer);
|
|
352
|
+
this.longPressTimer = null;
|
|
353
|
+
}
|
|
354
|
+
// 移除二次长按定时器逻辑,统一在 activateDragMode 处理
|
|
355
|
+
},
|
|
356
|
+
|
|
357
|
+
maybeSwapByPosition(pageX, pageY) {
|
|
358
|
+
const gridItems = Array.from(this.$el.querySelectorAll('.grid-item'));
|
|
359
|
+
let targetIndex = null;
|
|
360
|
+
for (let i = 0; i < gridItems.length; i++) {
|
|
361
|
+
if (i === this.draggingIndex) continue;
|
|
362
|
+
const rect = gridItems[i].getBoundingClientRect();
|
|
363
|
+
const centerX = (rect.left + rect.right) / 2;
|
|
364
|
+
const centerY = (rect.top + rect.bottom) / 2;
|
|
365
|
+
const halfW = rect.width * 0.35;
|
|
366
|
+
const halfH = rect.height * 0.35;
|
|
367
|
+
if (
|
|
368
|
+
pageX >= centerX - halfW && pageX <= centerX + halfW &&
|
|
369
|
+
pageY >= centerY - halfH && pageY <= centerY + halfH
|
|
370
|
+
) {
|
|
371
|
+
targetIndex = i;
|
|
372
|
+
break;
|
|
373
|
+
}
|
|
374
|
+
}
|
|
375
|
+
|
|
376
|
+
if (targetIndex !== null && targetIndex !== this.draggingIndex) {
|
|
377
|
+
const a = this.draggingIndex;
|
|
378
|
+
const b = targetIndex;
|
|
379
|
+
const tmp = this.data.list[a];
|
|
380
|
+
this.$set(this.data.list, a, this.data.list[b]);
|
|
381
|
+
this.$set(this.data.list, b, tmp);
|
|
382
|
+
this.draggingIndex = b;
|
|
383
|
+
}
|
|
384
|
+
},
|
|
385
|
+
getListData(callback) {
|
|
386
|
+
const list = Array.isArray(this.data && this.data.list) ? this.data.list : [];
|
|
387
|
+
const arr = list.map((it) => ({
|
|
388
|
+
id: String((it && (it.id != null ? it.id : '')) || ''),
|
|
389
|
+
label: String((it && (it.label != null ? it.label : '')) || ''),
|
|
390
|
+
imageSrc: (it && it.imageSrc) || ''
|
|
391
|
+
}));
|
|
392
|
+
const payload = { listData: arr, list: arr };
|
|
393
|
+
if (typeof callback === 'function') {
|
|
394
|
+
try { callback(payload); } catch (e) { /* ignore */ }
|
|
395
|
+
}
|
|
396
|
+
return payload;
|
|
397
|
+
}
|
|
398
|
+
}
|
|
399
|
+
};
|
|
400
|
+
</script>
|
|
401
|
+
|
|
402
|
+
<style scoped>
|
|
403
|
+
.ipc-drag-container {
|
|
404
|
+
position: relative;
|
|
405
|
+
background:#fff;
|
|
406
|
+
padding:20px
|
|
407
|
+
}
|
|
408
|
+
.grid {
|
|
409
|
+
display: grid;
|
|
410
|
+
width: 100%;
|
|
411
|
+
}
|
|
412
|
+
.grid-item {
|
|
413
|
+
position: relative;
|
|
414
|
+
box-sizing: border-box;
|
|
415
|
+
transition: transform 0.25s ease;
|
|
416
|
+
}
|
|
417
|
+
.grid-item.hidden {
|
|
418
|
+
opacity: 0 !important;
|
|
419
|
+
visibility: hidden;
|
|
420
|
+
}
|
|
421
|
+
.grid-item.being-dragged {
|
|
422
|
+
opacity: 0.2;
|
|
423
|
+
}
|
|
424
|
+
.box {
|
|
425
|
+
position: relative;
|
|
426
|
+
display: flex;
|
|
427
|
+
flex-direction: column;
|
|
428
|
+
align-items: center;
|
|
429
|
+
}
|
|
430
|
+
.box.shaking {
|
|
431
|
+
animation: shake 0.6s infinite;
|
|
432
|
+
transform-origin: center center;
|
|
433
|
+
}
|
|
434
|
+
@keyframes shake {
|
|
435
|
+
0% { transform: rotateZ(1.8deg); }
|
|
436
|
+
25% { transform: rotateZ(-1.8deg); }
|
|
437
|
+
50% { transform: rotateZ(1.8deg); }
|
|
438
|
+
75% { transform: rotateZ(-1.8deg); }
|
|
439
|
+
100% { transform: rotateZ(1.8deg); }
|
|
440
|
+
}
|
|
441
|
+
.thumb-wrap {
|
|
442
|
+
position: relative;
|
|
443
|
+
width: 100%;
|
|
444
|
+
/* 统一比例,按宽度自适应,可按需调整为固定高 */
|
|
445
|
+
aspect-ratio: 16 / 9;
|
|
446
|
+
background: #0000000a;
|
|
447
|
+
overflow: hidden;
|
|
448
|
+
border-radius: 16px;
|
|
449
|
+
}
|
|
450
|
+
.thumb {
|
|
451
|
+
width: 100%;
|
|
452
|
+
height: 100%;
|
|
453
|
+
object-fit: cover;
|
|
454
|
+
}
|
|
455
|
+
.delete-btn {
|
|
456
|
+
position: absolute;
|
|
457
|
+
top: 0;
|
|
458
|
+
right: 0;
|
|
459
|
+
border: none;
|
|
460
|
+
color: #fff;
|
|
461
|
+
font-size: 70px;
|
|
462
|
+
background:transparent;
|
|
463
|
+
font-weight:300
|
|
464
|
+
}
|
|
465
|
+
.label {
|
|
466
|
+
width: 100%;
|
|
467
|
+
text-align: center;
|
|
468
|
+
white-space: nowrap;
|
|
469
|
+
overflow: hidden;
|
|
470
|
+
text-overflow: ellipsis;
|
|
471
|
+
}
|
|
472
|
+
.label-row {
|
|
473
|
+
width: 100%;
|
|
474
|
+
display: flex;
|
|
475
|
+
align-items: center;
|
|
476
|
+
gap: 8px;
|
|
477
|
+
}
|
|
478
|
+
.edit-btn {
|
|
479
|
+
margin-left: auto;
|
|
480
|
+
padding: 4px 8px;
|
|
481
|
+
border: none;
|
|
482
|
+
border-radius: 4px;
|
|
483
|
+
background: #f5f5f5;
|
|
484
|
+
color: #333;
|
|
485
|
+
}
|
|
486
|
+
.drag-clone {
|
|
487
|
+
box-sizing: border-box;
|
|
488
|
+
pointer-events: none;
|
|
489
|
+
user-select: none;
|
|
490
|
+
}
|
|
491
|
+
|
|
492
|
+
/* 简易弹窗样式 */
|
|
493
|
+
.modal-mask {
|
|
494
|
+
position: fixed;
|
|
495
|
+
left: 0;
|
|
496
|
+
top: 0;
|
|
497
|
+
right: 0;
|
|
498
|
+
bottom: 0;
|
|
499
|
+
background: rgba(0,0,0,0.4);
|
|
500
|
+
display: flex;
|
|
501
|
+
align-items: center;
|
|
502
|
+
justify-content: center;
|
|
503
|
+
z-index: 10000;
|
|
504
|
+
}
|
|
505
|
+
.modal {
|
|
506
|
+
width: 60vw;
|
|
507
|
+
max-width: 60vw;
|
|
508
|
+
background: #fff;
|
|
509
|
+
border-radius: 24px;
|
|
510
|
+
padding: 16px;
|
|
511
|
+
box-shadow: 0 8px 20px rgba(0,0,0,0.18);
|
|
512
|
+
}
|
|
513
|
+
.modal-title {
|
|
514
|
+
font-size: 28px;
|
|
515
|
+
font-weight: 300;
|
|
516
|
+
color: #222;
|
|
517
|
+
margin: 24px 0 24px 0px;
|
|
518
|
+
text-align: center;
|
|
519
|
+
}
|
|
520
|
+
.modal-input {
|
|
521
|
+
width: 100%;
|
|
522
|
+
box-sizing: border-box;
|
|
523
|
+
border: 2px solid #e8e8e8;
|
|
524
|
+
border-radius: 8px;
|
|
525
|
+
padding: 20px 22px;
|
|
526
|
+
font-size: 24px;
|
|
527
|
+
outline: none;
|
|
528
|
+
}
|
|
529
|
+
.modal-input:focus {
|
|
530
|
+
border-color: #1677ff;
|
|
531
|
+
}
|
|
532
|
+
.modal-actions {
|
|
533
|
+
margin-top: 14px;
|
|
534
|
+
display: flex;
|
|
535
|
+
align-items: center;
|
|
536
|
+
flex-direction: row;
|
|
537
|
+
width: 100%;
|
|
538
|
+
justify-content: space-around;
|
|
539
|
+
}
|
|
540
|
+
.btn {
|
|
541
|
+
padding: 12px 24px;
|
|
542
|
+
font-size: 30px;
|
|
543
|
+
color:#46a2df
|
|
544
|
+
}
|
|
545
|
+
.btn-divider {
|
|
546
|
+
width: 1px;
|
|
547
|
+
height: 32px;
|
|
548
|
+
background: #eee;
|
|
549
|
+
}
|
|
550
|
+
</style>
|
|
551
|
+
|
|
552
|
+
|
|
553
|
+
|
package/src/index.js
CHANGED
|
@@ -215,6 +215,11 @@ const componentMap = [
|
|
|
215
215
|
componentAddress: 'midea-build-loading-view.vue',
|
|
216
216
|
isInPlugin: false
|
|
217
217
|
},
|
|
218
|
+
{
|
|
219
|
+
componentName: 'mideaIpcDragListView',
|
|
220
|
+
componentAddress: 'midea-ipc-drag-list-view.vue',
|
|
221
|
+
isInPlugin: false
|
|
222
|
+
},
|
|
218
223
|
]
|
|
219
224
|
|
|
220
225
|
module.exports = componentMap
|
package/src/transform-loader.js
CHANGED
|
@@ -230,14 +230,18 @@ function createComputedProperty(vBindValue, computedName) {
|
|
|
230
230
|
)
|
|
231
231
|
]),
|
|
232
232
|
),
|
|
233
|
-
t.returnStatement( //
|
|
234
|
-
t.
|
|
235
|
-
t.
|
|
236
|
-
|
|
237
|
-
|
|
238
|
-
|
|
239
|
-
|
|
240
|
-
|
|
233
|
+
t.returnStatement( // 返回展开后的浅拷贝,确保引用变化以触发依赖更新
|
|
234
|
+
t.objectExpression([
|
|
235
|
+
t.spreadElement(
|
|
236
|
+
t.callExpression(
|
|
237
|
+
t.memberExpression(t.identifier('Object'), t.identifier('assign')),
|
|
238
|
+
[
|
|
239
|
+
t.objectExpression([]),
|
|
240
|
+
t.memberExpression(t.thisExpression(), t.identifier(vBindValue))
|
|
241
|
+
]
|
|
242
|
+
)
|
|
243
|
+
)
|
|
244
|
+
])
|
|
241
245
|
)
|
|
242
246
|
])
|
|
243
247
|
)
|
package/src/.DS_Store
DELETED
|
Binary file
|
package/src/components/.DS_Store
DELETED
|
Binary file
|