Skip to content

Commit edfdee8

Browse files
owen118zowen118z
committed
营销：适配商城装修组件【悬浮按钮】
1 parent 76025b6 commit edfdee8

File tree

4 files changed

+163
-1
lines changed

4 files changed

+163
-1
lines changed

‎src/components/DiyEditor/components/mobile/FloatingActionButton/config.ts

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
import { DiyComponent } from '@/components/DiyEditor/util'
2+
3+
// 悬浮按钮属性
4+
export interface FloatingActionButtonProperty {
5+
// 展开方向
6+
direction: 'horizontal' | 'vertical'
7+
// 是否显示文字
8+
showText: boolean
9+
// 按钮列表
10+
list: FloatingActionButtonItemProperty[]
11+
}
12+
13+
// 悬浮按钮项属性
14+
export interface FloatingActionButtonItemProperty {
15+
// 图片地址
16+
imgUrl: string
17+
// 跳转连接
18+
url: string
19+
// 文字
20+
text: string
21+
// 文字颜色
22+
textColor: string
23+
}
24+
25+
// 定义组件
26+
export const component = {
27+
id: 'FloatingActionButton',
28+
name: '悬浮按钮',
29+
icon: 'tabler:float-right',
30+
position: 'fixed',
31+
property: {
32+
direction: 'vertical',
33+
showText: true,
34+
list: [{ textColor: '#fff' }]
35+
}
36+
} as DiyComponent<FloatingActionButtonProperty>

‎src/components/DiyEditor/components/mobile/FloatingActionButton/index.vue

Lines changed: 74 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,74 @@
1+
<template>
2+
<div
3+
:class="[
4+
'absolute bottom-32px right-[calc(50%-375px/2+32px)] flex z-12 gap-12px items-center',
5+
{
6+
'flex-row': property.direction === 'horizontal',
7+
'flex-col': property.direction === 'vertical'
8+
}
9+
]"
10+
>
11+
<template v-if="expanded">
12+
<div
13+
v-for="(item, index) in property.list"
14+
:key="index"
15+
class="flex flex-col items-center"
16+
@click="handleActive(index)"
17+
>
18+
<el-image :src="item.imgUrl" fit="contain" class="h-27px w-27px">
19+
<template #error>
20+
<div class="h-full w-full flex items-center justify-center">
21+
<Icon icon="ep:picture" :color="item.textColor" />
22+
</div>
23+
</template>
24+
</el-image>
25+
<span v-if="property.showText" class="mt-4px text-12px" :style="{ color: item.textColor }">
26+
{{ item.text }}
27+
</span>
28+
</div>
29+
</template>
30+
<!-- todo: @owen 使用APP主题色 -->
31+
<el-button type="primary" size="large" circle @click="handleToggleFab">
32+
<Icon icon="ep:plus" :class="['fab-icon', { active: expanded }]" />
33+
</el-button>
34+
</div>
35+
<!-- 模态背景：展开时显示，点击后折叠 -->
36+
<div v-if="expanded" class="modal-bg" @click="handleToggleFab"></div>
37+
</template>
38+
<script setup lang="ts">
39+
import { FloatingActionButtonProperty } from './config'
40+
41+
/** 悬浮按钮 */
42+
defineOptions({ name: 'FloatingActionButton' })
43+
// 定义属性
44+
defineProps<{ property: FloatingActionButtonProperty }>()
45+
46+
// 是否展开
47+
const expanded = ref(true)
48+
// 处理展开/折叠
49+
const handleToggleFab = () => {
50+
expanded.value = !expanded.value
51+
}
52+
</script>
53+
54+
<style scoped lang="scss">
55+
/* 模态背景 */
56+
.modal-bg {
57+
position: absolute;
58+
left: calc(50% - 375px / 2);
59+
top: 0;
60+
z-index: 11;
61+
width: 375px;
62+
height: 100%;
63+
background-color: rgba(#000000, 0.4);
64+
}
65+
66+
.fab-icon {
67+
transform: rotate(0deg);
68+
transition: transform 0.3s;
69+
70+
&.active {
71+
transform: rotate(135deg);
72+
}
73+
}
74+
</style>

‎src/components/DiyEditor/components/mobile/FloatingActionButton/property.vue

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
<template>
2+
<el-form label-width="80px" :model="formData">
3+
<el-card header="按钮配置" class="property-group" shadow="never">
4+
<el-form-item label="展开方向" prop="direction">
5+
<el-radio-group v-model="formData.direction">
6+
<el-radio label="vertical">垂直</el-radio>
7+
<el-radio label="horizontal">水平</el-radio>
8+
</el-radio-group>
9+
</el-form-item>
10+
<el-form-item label="显示文字" prop="showText">
11+
<el-switch v-model="formData.showText" />
12+
</el-form-item>
13+
</el-card>
14+
<el-card header="按钮列表" class="property-group" shadow="never">
15+
<Draggable v-model="formData.list" :empty-item="{ textColor: '#fff' }">
16+
<template #default="{ element, index }">
17+
<el-form-item label="图标" :prop="`list[${index}].imgUrl`">
18+
<UploadImg v-model="element.imgUrl" height="56px" width="56px" />
19+
</el-form-item>
20+
<el-form-item label="文字" :prop="`list[${index}].text`">
21+
<InputWithColor v-model="element.text" v-model:color="element.textColor" />
22+
</el-form-item>
23+
<el-form-item label="跳转链接" :prop="`list[${index}].url`">
24+
<AppLinkInput v-model="element.url" />
25+
</el-form-item>
26+
</template>
27+
</Draggable>
28+
</el-card>
29+
</el-form>
30+
</template>
31+
32+
<script setup lang="ts">
33+
import { FloatingActionButtonProperty } from './config'
34+
import { usePropertyForm } from '@/components/DiyEditor/util'
35+
36+
// 悬浮按钮属性面板
37+
defineOptions({ name: 'FloatingActionButtonProperty' })
38+
39+
const props = defineProps<{ modelValue: FloatingActionButtonProperty }>()
40+
const emit = defineEmits(['update:modelValue'])
41+
const { formData } = usePropertyForm(props.modelValue, emit)
42+
</script>
43+
44+
<style scoped lang="scss"></style>

‎src/components/DiyEditor/util.ts

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -111,7 +111,15 @@ export const PAGE_LIBS = [
111111
{
112112
name: '基础组件',
113113
extended: true,
114-
components: ['SearchBar', 'NoticeBar', 'MenuSwiper', 'MenuGrid', 'MenuList', 'Popover']
114+
components: [
115+
'SearchBar',
116+
'NoticeBar',
117+
'MenuSwiper',
118+
'MenuGrid',
119+
'MenuList',
120+
'Popover',
121+
'FloatingActionButton'
122+
]
115123
},
116124
{
117125
name: '图文组件',

0 commit comments

Comments
 (0)