diff --git a/src/components/common/hot/index.scss b/src/components/common/hot/index.scss index 3e3e8cc5..5c493b94 100644 --- a/src/components/common/hot/index.scss +++ b/src/components/common/hot/index.scss @@ -133,6 +133,9 @@ .name { width: 9.8rem; } + .add_hot { + width: 8.8rem; + } } } } diff --git a/src/components/common/hot/index.vue b/src/components/common/hot/index.vue index 550f657f..02eb6cbf 100644 --- a/src/components/common/hot/index.vue +++ b/src/components/common/hot/index.vue @@ -39,13 +39,14 @@
图片热区
-
框选热区范围,双击设置热区信息
+ 添加选区 +
框选热区范围,双击设置热区信息
@@ -142,7 +143,7 @@ const end_drag = (event: MouseEvent) => { if (rect_end.value.width > 16 && rect_end.value.height > 16) { hot_list.value.data.push({ name: '热区' + (hot_list.value.data.length + 1), - link: { name: '', link: '' }, + link: {}, drag_start: cloneDeep(rect_start.value), drag_end: cloneDeep(rect_end.value), }); @@ -332,6 +333,24 @@ const rect_style = computed(() => { const del_event = (index: number) => { hot_list.value.data.splice(index, 1); }; +const add_event = () => { + hot_list.value.data.push({ + name: '热区' + (hot_list.value.data.length + 1), + link: {}, + drag_start: { + x: 0, + y: 0, + width: 0, + height: 0, + }, + drag_end: { + x: 100, + y: 100, + width: 100, + height: 100, + }, + }); +}; //#endregion 右侧热区编辑-----------------------------------------------end //#region 设置热区弹窗-----------------------------------------------start diff --git a/src/types/global.d.ts b/src/types/global.d.ts index 91d5b5ed..576641bf 100644 --- a/src/types/global.d.ts +++ b/src/types/global.d.ts @@ -102,7 +102,7 @@ declare global { */ type linkData = { id?: number; - name: string; + name?: string; link?: String; data?: Data[]; icon?: string;