diff --git a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/menu-grid/config.ts b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/menu-grid/config.ts index db6b55264..0bf47b15d 100644 --- a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/menu-grid/config.ts +++ b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/menu-grid/config.ts @@ -4,41 +4,28 @@ import { cloneDeep } from '@vben/utils'; /** 宫格导航属性 */ export interface MenuGridProperty { - // 列数 - column: number; - // 导航菜单列表 - list: MenuGridItemProperty[]; - // 组件样式 - style: ComponentStyle; + column: number; // 列数 + list: MenuGridItemProperty[]; // 导航菜单列表 + style: ComponentStyle; // 组件样式 } /** 宫格导航项目属性 */ export interface MenuGridItemProperty { - // 图标链接 - iconUrl: string; - // 标题 - title: string; - // 标题颜色 - titleColor: string; - // 副标题 - subtitle: string; - // 副标题颜色 - subtitleColor: string; - // 链接 - url: string; - // 角标 + iconUrl: string; // 图标链接 + title: string; // 标题 + titleColor: string; // 标题颜色 + subtitle: string; // 副标题 + subtitleColor: string; // 副标题颜色 + url: string; // 链接 badge: { - // 角标背景颜色 - bgColor: string; - // 是否显示 - show: boolean; - // 角标文字 - text: string; - // 角标文字颜色 - textColor: string; + bgColor: string; // 角标背景颜色 + show: boolean; // 是否显示 + text: string; // 角标文字 + textColor: string; // 角标文字颜色 }; } +/** 宫格导航项目默认属性 */ export const EMPTY_MENU_GRID_ITEM_PROPERTY = { title: '标题', titleColor: '#333', @@ -51,7 +38,7 @@ export const EMPTY_MENU_GRID_ITEM_PROPERTY = { }, } as MenuGridItemProperty; -// 定义组件 +/** 定义组件 */ export const component = { id: 'MenuGrid', name: '宫格导航', diff --git a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/menu-grid/index.vue b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/menu-grid/index.vue index 2036ede96..1e14dc158 100644 --- a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/menu-grid/index.vue +++ b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/menu-grid/index.vue @@ -5,6 +5,7 @@ import { ElImage } from 'element-plus'; /** 宫格导航 */ defineOptions({ name: 'MenuGrid' }); + defineProps<{ property: MenuGridProperty }>(); @@ -16,7 +17,6 @@ defineProps<{ property: MenuGridProperty }>(); class="relative flex flex-col items-center pb-3.5 pt-5" :style="{ width: `${100 * (1 / property.column)}%` }" > - (); - - diff --git a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/menu-grid/property.vue b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/menu-grid/property.vue index 9db7ac2ad..19b4fc814 100644 --- a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/menu-grid/property.vue +++ b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/menu-grid/property.vue @@ -12,7 +12,12 @@ import { } from 'element-plus'; import UploadImg from '#/components/upload/image-upload.vue'; -import { AppLinkInput, Draggable } from '#/views/mall/promotion/components'; +import { + AppLinkInput, + ColorInput, + Draggable, + InputWithColor, +} from '#/views/mall/promotion/components'; import ComponentContainerProperty from '../../component-container-property.vue'; import { EMPTY_MENU_GRID_ITEM_PROPERTY } from './config'; @@ -21,7 +26,9 @@ import { EMPTY_MENU_GRID_ITEM_PROPERTY } from './config'; defineOptions({ name: 'MenuGridProperty' }); const props = defineProps<{ modelValue: MenuGridProperty }>(); + const emit = defineEmits(['update:modelValue']); + const formData = useVModel(props, 'modelValue', emit); @@ -35,7 +42,6 @@ const formData = useVModel(props, 'modelValue', emit); 4个 - - -