feat：【mall】diy editor 的 notice-bar 优化

apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/notice-bar/config.ts

@@ -2,27 +2,20 @@ import type { ComponentStyle, DiyComponent } from '../../../util';
 
 /** 公告栏属性 */
 export interface NoticeBarProperty {
-  // 图标地址
+  iconUrl: string; // 图标地址
-  iconUrl: string;
+  contents: NoticeContentProperty[]; // 公告内容列表
-  // 公告内容列表
+  backgroundColor: string; // 背景颜色
-  contents: NoticeContentProperty[];
+  textColor: string; // 文字颜色
-  // 背景颜色
+  style: ComponentStyle; // 组件样式
-  backgroundColor: string;
-  // 文字颜色
-  textColor: string;
-  // 组件样式
-  style: ComponentStyle;
 }
 
 /** 内容属性 */
 export interface NoticeContentProperty {
-  // 内容文字
+  text: string; // 内容文字
-  text: string;
+  url: string; // 链接地址
-  // 链接地址
-  url: string;
 }
 
-// 定义组件
+/** 定义组件 */
 export const component = {
   id: 'NoticeBar',
   name: '公告栏',

apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/notice-bar/property.vue

@@ -13,18 +13,17 @@ import {
 
 import ComponentContainerProperty from '../../component-container-property.vue';
 
-// 通知栏属性面板
+/** 公告栏属性面板 */
 defineOptions({ name: 'NoticeBarProperty' });
+
 const props = defineProps<{ modelValue: NoticeBarProperty }>();
 
 const emit = defineEmits(['update:modelValue']);
 
-// 表单校验
+const formData = useVModel(props, 'modelValue', emit);
 const rules = {
   content: [{ required: true, message: '请输入公告', trigger: 'blur' }],
-};
+}; // 表单校验
-
-const formData = useVModel(props, 'modelValue', emit);
 </script>
 
 <template>
@@ -59,6 +58,4 @@ const formData = useVModel(props, 'modelValue', emit);
       </ElCard>
     </ElForm>
   </ComponentContainerProperty>
-</template>
+</template>
-
-<style scoped lang="scss"></style>