feat：【mall】diy editor 的 floating-action-button 组件

apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/floating-action-button/config.ts

@@ -1,28 +1,21 @@
 import type { DiyComponent } from '../../../util';
 
-// 悬浮按钮属性
+/** 悬浮按钮属性 */
 export interface FloatingActionButtonProperty {
-  // 展开方向
+  direction: 'horizontal' | 'vertical'; // 展开方向
-  direction: 'horizontal' | 'vertical';
+  showText: boolean; // 是否显示文字
-  // 是否显示文字
+  list: FloatingActionButtonItemProperty[]; // 按钮列表
-  showText: boolean;
-  // 按钮列表
-  list: FloatingActionButtonItemProperty[];
 }
 
-// 悬浮按钮项属性
+/** 悬浮按钮项属性 */
 export interface FloatingActionButtonItemProperty {
-  // 图片地址
+  imgUrl: string; // 图片地址
-  imgUrl: string;
+  url: string; // 跳转连接
-  // 跳转连接
+  text: string; // 文字
-  url: string;
+  textColor: string; // 文字颜色
-  // 文字
-  text: string;
-  // 文字颜色
-  textColor: string;
 }
 
-// 定义组件
+/** 定义组件 */
 export const component = {
   id: 'FloatingActionButton',
   name: '悬浮按钮',

apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/floating-action-button/index.vue

@@ -5,23 +5,20 @@ import { ref } from 'vue';
 
 import { IconifyIcon } from '@vben/icons';
 
-import { ElImage, ElMessage } from 'element-plus';
+import { ElButton, ElImage } from 'element-plus';
 
 /** 悬浮按钮 */
 defineOptions({ name: 'FloatingActionButton' });
-// 定义属性
+
+/** 定义属性 */
 defineProps<{ property: FloatingActionButtonProperty }>();
 
-// 是否展开
+const expanded = ref(false); // 是否展开
-const expanded = ref(false);
-// 处理展开/折叠
-const handleToggleFab = () => {
-  expanded.value = !expanded.value;
-};
 
-const handleActive = (index: number) => {
+/** 处理展开/折叠 */
-  ElMessage.success(`点击了${index}`);
+function handleToggleFab() {
-};
+  expanded.value = !expanded.value;
+}
 </script>
 <template>
   <div
@@ -38,7 +35,6 @@ const handleActive = (index: number) => {
         v-for="(item, index) in property.list"
         :key="index"
         class="flex flex-col items-center"
-        @click="handleActive(index)"
       >
         <ElImage :src="item.imgUrl" fit="contain" class="h-7 w-7">
           <template #error>
@@ -57,13 +53,13 @@ const handleActive = (index: number) => {
       </div>
     </template>
     <!-- todo: @owen 使用APP主题色 -->
-    <el-button type="primary" size="large" circle @click="handleToggleFab">
+    <ElButton type="primary" size="large" circle @click="handleToggleFab">
       <IconifyIcon
         icon="ep:plus"
         class="fab-icon"
         :class="[{ active: expanded }]"
       />
-    </el-button>
+    </ElButton>
   </div>
   <!-- 模态背景：展开时显示，点击后折叠 -->
   <div v-if="expanded" class="modal-bg" @click="handleToggleFab"></div>

apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/floating-action-button/property.vue

@@ -18,11 +18,13 @@ import {
   InputWithColor,
 } from '#/views/mall/promotion/components';
 
-// 悬浮按钮属性面板
+/** 悬浮按钮属性面板 */
 defineOptions({ name: 'FloatingActionButtonProperty' });
 
 const props = defineProps<{ modelValue: FloatingActionButtonProperty }>();
+
 const emit = defineEmits(['update:modelValue']);
+
 const formData = useVModel(props, 'modelValue', emit);
 </script>
 
@@ -64,5 +66,3 @@ const formData = useVModel(props, 'modelValue', emit);
     </ElCard>
   </ElForm>
 </template>
-
-<style scoped lang="scss"></style>