From a97a8b09caacd66e3212bc26a3a8baf14232ec39 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=8E=E8=82=96=E7=A3=8A?= <18851179580@163.com> Date: Fri, 6 Sep 2024 16:02:52 +0800 Subject: [PATCH 1/5] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E8=87=AA=E5=AE=9A?= =?UTF-8?q?=E4=B9=89=E7=82=B9=E5=87=BB=E4=B8=8A=E4=B8=8B=E5=B7=A6=E5=8F=B3?= =?UTF-8?q?=E6=97=B6=E7=9A=84=E6=93=8D=E4=BD=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../model-custom/components/index.vue | 79 ++++++++++++++++++- 1 file changed, 78 insertions(+), 1 deletion(-) diff --git a/src/components/model-custom/components/index.vue b/src/components/model-custom/components/index.vue index 9657c793..82b26840 100644 --- a/src/components/model-custom/components/index.vue +++ b/src/components/model-custom/components/index.vue @@ -299,7 +299,7 @@ const resizingHandle = (new_location: any, key: string, index: number) => { com_data.com_height = h; com_data.staging_height = h; if (key == 'img') { - const { img_width, img_height } = handleImg(com_data, w, h); + const { img_width, img_height } = handleImg(com_data, w, h); com_data.img_width = img_width; com_data.img_height = img_height; } else if (key == 'auxiliary-line') { @@ -368,6 +368,10 @@ const end_drag = (event: MouseEvent) => { init_drag_style.value = ``; if (rect_end.value.width > 16 && rect_end.value.height > 16) { hot_list.data = [{ name: '热区' + (hot_list.data.length + 1), link: {}, drag_start: cloneDeep(rect_start.value), drag_end: cloneDeep(rect_end.value) }]; + diy_data.value.forEach((item: any) => { + item.show_tabs = '0'; + }); + emits('rightUpdate', {}); } rect_start.value = { x: 0, y: 0, width: 0, height: 0 }; rect_end.value = { x: 0, y: 0, width: 0, height: 0 }; @@ -565,6 +569,79 @@ const rect_style = computed(() => { }); //#endregion //#region 绑定上下左右事件 +const handleKeyUp = (e: KeyboardEvent) => { + let key_code = ['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight']; + let x = 0; + let y = 0; + // 键盘控制 + if (e.key === 'ArrowUp') { //上键 + y = -1; + } else if (e.key === 'ArrowDown') { // 下键 + y = 1; + } else if (e.key === 'ArrowLeft') { //左键 + x = -1; + } else if (e.key === 'ArrowRight') { //右键 + x = 1; + } + e.preventDefault(); + // 只有是点击上下左右的时候才会生效 + if (key_code.includes(e.key)) { + data_handling(x, y); + } +}; +const data_handling = (x: number, y: number) => { + // 遍历对象,内部容器更新 + if (hot_list.data.length > 0) { + // 更新热区位置 + const { drag_start, drag_end } = hot_list.data[0]; + if (isWithinBounds(drag_start.x + x, drag_end.width, 390)) { + hot_list.data[0].drag_start.x += x; + } + if (isWithinBounds(drag_start.y + y, drag_end.height, center_height.value)) { + hot_list.data[0].drag_start.y += y; + } + // 按下按钮的时候判断当前包含哪些组件, 避免后续包裹的或者没有手动拖拽过的无法更新其中组件的内容 + const rect1 = { x: drag_start.x, y: drag_start.y, width: drag_end.width, height: drag_end.height } + diy_data.value.forEach(item => { + const rect2 = { x: item.location.x, y: item.location.y, width: item.com_data.com_width, height: item.com_data.com_height }; + // 如果交集或者包裹，返回为1，否则为0 + if (isRectangleIntersecting(rect1, rect2) == '1') { + // x 轴不小于0 并且不大于容器宽度 + if (isWithinBounds(item.location.x + x, item.com_data.com_width, 390)) { + item.location.x += x; + } + // Y轴不小于0 并且不大于容器高度 + if (isWithinBounds(item.location.y + y, item.com_data.com_height, center_height.value)) { + item.location.y += y; + } + } + }); + } else { + diy_data.value.forEach(item => { + // 只更新选中的数据 + if (item.show_tabs == '1') { + // x 轴不小于0 并且不大于容器宽度 + if (isWithinBounds(item.location.x + x, item.com_data.com_width, 390)) { + item.location.x += x; + } + // Y轴不小于0 并且不大于容器高度 + if (isWithinBounds(item.location.y + y, item.com_data.com_height, center_height.value)) { + item.location.y += y; + } + } + }); + } +}; +// coordinate 新的坐标 current_size 当前坐标对应的组件大小(指的是组件的宽高) max_size 容器的最大大小 +const isWithinBounds = (coordinate:number, current_size: number, max_size: number) => coordinate >= 0 && coordinate + current_size <= max_size; +onMounted(() => { + // 监听点击事件 + document.addEventListener('keyup', handleKeyUp); +}); +onUnmounted(() => { + // 移除监听事件 + document.removeEventListener('keyup', handleKeyUp); +}); //#endregion defineExpose({ diy_data, From c82203e4910190275fc22706d662ddda7bb9ab3c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=8E=E8=82=96=E7=A3=8A?= <18851179580@163.com> Date: Fri, 6 Sep 2024 16:06:37 +0800 Subject: [PATCH 2/5] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E8=87=AA=E5=AE=9A?= =?UTF-8?q?=E4=B9=89=E6=98=BE=E7=A4=BA?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/model-custom/components/index.scss | 5 +++++ src/components/model-custom/components/index.vue | 4 ++-- 2 files changed, 7 insertions(+), 2 deletions(-) diff --git a/src/components/model-custom/components/index.scss b/src/components/model-custom/components/index.scss index e6a385cb..4b2e090e 100644 --- a/src/components/model-custom/components/index.scss +++ b/src/components/model-custom/components/index.scss @@ -230,4 +230,9 @@ top: 0px; z-index: 6; display: none; +} + +.clear-selection { + cursor: pointer; + color: $cr-main; } \ No newline at end of file diff --git a/src/components/model-custom/components/index.vue b/src/components/model-custom/components/index.vue index 82b26840..0d437cf7 100644 --- a/src/components/model-custom/components/index.vue +++ b/src/components/model-custom/components/index.vue @@ -20,7 +20,7 @@ 组件高度 -
已选组件清除选中
+
已选组件清除选中
{{ item.name }}
@@ -635,7 +635,7 @@ const data_handling = (x: number, y: number) => { // coordinate 新的坐标 current_size 当前坐标对应的组件大小(指的是组件的宽高) max_size 容器的最大大小 const isWithinBounds = (coordinate:number, current_size: number, max_size: number) => coordinate >= 0 && coordinate + current_size <= max_size; onMounted(() => { - // 监听点击事件 + // 监听键盘事件 document.addEventListener('keyup', handleKeyUp); }); onUnmounted(() => { From af90cbfc815ed129553dd03b3ca3bf1f363b6b09 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=8E=E8=82=96=E7=A3=8A?= <18851179580@163.com> Date: Fri, 6 Sep 2024 16:22:37 +0800 Subject: [PATCH 3/5] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E9=A1=B5=E9=9D=A2?= =?UTF-8?q?=E6=98=BE=E7=A4=BA?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../model-image/model-image-style.vue | 5 +---- .../custom-module/model-text/model-text-style.vue | 5 +---- .../model-goods-tabs/model-goods-tabs-content.vue | 2 +- .../model-search/model-search-content.vue | 4 ++-- src/components/model-tabs/model-tabs-content.vue | 5 +---- .../model-text-title/model-text-title-content.vue | 15 +++------------ src/components/page-settings/page-content.vue | 9 ++------- src/components/page-settings/page-styles.vue | 10 ++-------- 8 files changed, 13 insertions(+), 42 deletions(-) diff --git a/src/components/common/custom-module/model-image/model-image-style.vue b/src/components/common/custom-module/model-image/model-image-style.vue index e93f6d3f..e0a7c173 100644 --- a/src/components/common/custom-module/model-image/model-image-style.vue +++ b/src/components/common/custom-module/model-image/model-image-style.vue @@ -34,10 +34,7 @@
边框设置
- - 显示 - 隐藏 - +