diff --git a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/magic-cube/config.ts b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/magic-cube/config.ts index ef03fc9a6..13b1c4721 100644 --- a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/magic-cube/config.ts +++ b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/magic-cube/config.ts @@ -2,39 +2,26 @@ import type { ComponentStyle, DiyComponent } from '../../../util'; /** 广告魔方属性 */ export interface MagicCubeProperty { - // 上圆角 - borderRadiusTop: number; - // 下圆角 - borderRadiusBottom: number; - // 间隔 - space: number; - // 导航菜单列表 - list: MagicCubeItemProperty[]; - // 组件样式 - style: ComponentStyle; + borderRadiusTop: number; // 上圆角 + borderRadiusBottom: number; // 下圆角 + space: number; // 间隔 + list: MagicCubeItemProperty[]; // 导航菜单列表 + style: ComponentStyle; // 组件样式 } /** 广告魔方项目属性 */ export interface MagicCubeItemProperty { - // 图标链接 - imgUrl: string; - // 链接 - url: string; - // 宽 - width: number; - // 高 - height: number; - // 上 - top: number; - // 左 - left: number; - // 右 - right: number; - // 下 - bottom: number; + imgUrl: string; // 图标链接 + url: string; // 链接 + width: number; // 宽 + height: number; // 高 + top: number; // 上 + left: number; // 左 + right: number; // 右 + bottom: number; // 下 } -// 定义组件 +/** 定义组件 */ export const component = { id: 'MagicCube', name: '广告魔方', diff --git a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/magic-cube/index.vue b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/magic-cube/index.vue index 5a3aa7e57..1965bde82 100644 --- a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/magic-cube/index.vue +++ b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/magic-cube/index.vue @@ -9,9 +9,11 @@ import { ElImage } from 'element-plus'; /** 广告魔方 */ defineOptions({ name: 'MagicCube' }); + const props = defineProps<{ property: MagicCubeProperty }>(); -// 一个方块的大小 -const CUBE_SIZE = 93.75; + +const CUBE_SIZE = 93.75; // 一个方块的大小 + /** * 计算方块的行数 * 行数用于计算魔方的总体高度,存在以下情况: @@ -80,5 +82,3 @@ const rowCount = computed(() => { - - diff --git a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/magic-cube/property.vue b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/magic-cube/property.vue index 1f23095c6..ddccd8d0f 100644 --- a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/magic-cube/property.vue +++ b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/magic-cube/property.vue @@ -18,11 +18,14 @@ import ComponentContainerProperty from '../../component-container-property.vue'; defineOptions({ name: 'MagicCubeProperty' }); const props = defineProps<{ modelValue: MagicCubeProperty }>(); + const emit = defineEmits(['update:modelValue']); + const formData = useVModel(props, 'modelValue', emit); -// 选中的热区 -const selectedHotAreaIndex = ref(-1); +const selectedHotAreaIndex = ref(-1); // 选中的热区 + +/** 处理热区被选中事件 */ const handleHotAreaSelected = (_: any, index: number) => { selectedHotAreaIndex.value = index; }; @@ -30,7 +33,6 @@ const handleHotAreaSelected = (_: any, index: number) => { - -