sileya-ai
/
vr-uniapp
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

修复hot组件中拖拽事件阻止冒泡的问题。通过注释掉`event.stopPropagation();`允许拖拽操作时事件冒泡至父元素，以触发父元素的拖拽方法。同时，修复了`start_drag_area_box`和`start_drag_btn`方法中事件修饰符的错误使用，应使用`$event.stopPropagation();`而不是`event.preventDefault();`。另外，修改了`index.vue`文件中拖拽按钮的事件修饰符从`@mousedown.prevent`更正为`@mousedown.stop`，以正确阻止事件传播。最后，调整了`nextTick`为`setTimeout`以确保DOM更新后执行，解决了组件不正确渲染的问题。 

sws 2024-08-12
v1.0.0
sws 2024-08-12 18:10:48 +08:00
parent d1f060888d
commit 259674c09c
2 changed files with 9 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
src/components/common/hot/index.vue
View File

@ -16,9 +16,9 @@
<el-image :src="hot_list.img" class="w img" @selectstart.prevent @contextmenu.prevent @dragstart.prevent></el-image>
</div>
<div ref="areaRef" class="area" :style="init_drag_style"></div>
<div v-for="(item, index) in hot_list.data" :key="index" class="area-box" :style="rect_style(item.drag_start, item.drag_end)" @mousedown.prevent="start_drag_area_box(index, $event)" @dblclick="dbl_drag_event(item, index)">
<div v-for="(item, index) in hot_list.data" :key="index" class="area-box" :style="rect_style(item.drag_start, item.drag_end)" @mousedown.stop="start_drag_area_box(index, $event)" @dblclick="dbl_drag_event(item, index)">
<div class="del-btn" @click.stop="del_area_event(index)"><icon name="close"></icon></div>
<div class="drag-btn" :data-index="index" @mousedown.prevent="start_drag_btn(index, $event)"></div>
<div class="drag-btn" :data-index="index" @mousedown.stop="start_drag_btn(index, $event)"></div>
<div class="text">
<div class="name">{{ item.name }}</div>
<div class="status" :class="!is_obj_empty(item.link) ? 'cr-primary' : 'cr-error'">{{ !is_obj_empty(item.link) ? '已设置' : '未设置' }}</div>
@ -160,7 +160,7 @@ const start_drag_area_box = (index: number, event: MouseEvent) => {
// 当子元素拖拽方法触发后父元素方法不触发
document.onmousemove = (areaBoxEvent) => {
areaBoxEvent.stopPropagation();
// areaBoxEvent.stopPropagation();
if (drag_box_bool.value) {
if (!imgBoxRef.value) return;
const new_coordinate = {
@ -186,7 +186,7 @@ const start_drag_area_box = (index: number, event: MouseEvent) => {
}
};
document.onmouseup = (areaBoxEvent) => {
areaBoxEvent.stopPropagation();
// areaBoxEvent.stopPropagation();
drag_box_bool.value = false;
};
};
@ -198,7 +198,7 @@ const start_drag_btn = (index: number, event: MouseEvent) => {
let clone_drag_start = hot_list.value.data[hot_list_index.value].drag_start;
let clone_drag_end = hot_list.value.data[hot_list_index.value].drag_end;
document.onmousemove = (dragBtnEvent) => {
dragBtnEvent.stopPropagation();
// dragBtnEvent.stopPropagation();
//用鼠标的位置减去鼠标相对元素的位置，得到元素的位置
if (drag_box_scale_bool.value) {
if (!imgBoxRef.value) return;
@ -213,7 +213,7 @@ const start_drag_btn = (index: number, event: MouseEvent) => {
}
};
document.onmouseup = (dragBtnEvent2) => {
dragBtnEvent2.stopPropagation();
// dragBtnEvent2.stopPropagation();
drag_box_scale_bool.value = false;
};
};

5
src/components/model-hot-zone/index.vue
View File

@ -39,7 +39,7 @@ watch(
img_width.value = new_content?.hot.img_width || 1;
img_height.value = new_content?.hot.img_height || 1;
style_container.value = common_styles_computer(new_style.common_style);
nextTick(() => {
setTimeout(() => {
if (containerRef.value && hotRef.value) {
// 原图片的宽和高和实际展示的图片宽和高的比例
w_scale1.value = containerRef.value?.clientWidth / img_width.value;
@ -48,8 +48,9 @@ watch(
// 坐标缩小比例 containerRef的宽高除以hotRef的宽高
w_scale2.value = hotRef.value?.clientWidth / containerRef.value?.clientWidth;
h_scale2.value = hotRef.value?.clientHeight / containerRef.value?.clientHeight;
console.log(containerRef.value?.clientHeight);
}
});
}, 50);
},
{ immediate: true, deep: true }
);