营销:适配商城装修组件【悬浮按钮】

This commit is contained in:
owen 2023-12-09 21:33:47 +08:00
parent 76025b6821
commit edfdee8cc1
4 changed files with 163 additions and 1 deletions

View File

@ -0,0 +1,36 @@
import { DiyComponent } from '@/components/DiyEditor/util'
// 悬浮按钮属性
export interface FloatingActionButtonProperty {
// 展开方向
direction: 'horizontal' | 'vertical'
// 是否显示文字
showText: boolean
// 按钮列表
list: FloatingActionButtonItemProperty[]
}
// 悬浮按钮项属性
export interface FloatingActionButtonItemProperty {
// 图片地址
imgUrl: string
// 跳转连接
url: string
// 文字
text: string
// 文字颜色
textColor: string
}
// 定义组件
export const component = {
id: 'FloatingActionButton',
name: '悬浮按钮',
icon: 'tabler:float-right',
position: 'fixed',
property: {
direction: 'vertical',
showText: true,
list: [{ textColor: '#fff' }]
}
} as DiyComponent<FloatingActionButtonProperty>

View File

@ -0,0 +1,74 @@
<template>
<div
:class="[
'absolute bottom-32px right-[calc(50%-375px/2+32px)] flex z-12 gap-12px items-center',
{
'flex-row': property.direction === 'horizontal',
'flex-col': property.direction === 'vertical'
}
]"
>
<template v-if="expanded">
<div
v-for="(item, index) in property.list"
:key="index"
class="flex flex-col items-center"
@click="handleActive(index)"
>
<el-image :src="item.imgUrl" fit="contain" class="h-27px w-27px">
<template #error>
<div class="h-full w-full flex items-center justify-center">
<Icon icon="ep:picture" :color="item.textColor" />
</div>
</template>
</el-image>
<span v-if="property.showText" class="mt-4px text-12px" :style="{ color: item.textColor }">
{{ item.text }}
</span>
</div>
</template>
<!-- todo: @owen 使用APP主题色 -->
<el-button type="primary" size="large" circle @click="handleToggleFab">
<Icon icon="ep:plus" :class="['fab-icon', { active: expanded }]" />
</el-button>
</div>
<!-- 模态背景展开时显示点击后折叠 -->
<div v-if="expanded" class="modal-bg" @click="handleToggleFab"></div>
</template>
<script setup lang="ts">
import { FloatingActionButtonProperty } from './config'
/** 悬浮按钮 */
defineOptions({ name: 'FloatingActionButton' })
//
defineProps<{ property: FloatingActionButtonProperty }>()
//
const expanded = ref(true)
// /
const handleToggleFab = () => {
expanded.value = !expanded.value
}
</script>
<style scoped lang="scss">
/* 模态背景 */
.modal-bg {
position: absolute;
left: calc(50% - 375px / 2);
top: 0;
z-index: 11;
width: 375px;
height: 100%;
background-color: rgba(#000000, 0.4);
}
.fab-icon {
transform: rotate(0deg);
transition: transform 0.3s;
&.active {
transform: rotate(135deg);
}
}
</style>

View File

@ -0,0 +1,44 @@
<template>
<el-form label-width="80px" :model="formData">
<el-card header="按钮配置" class="property-group" shadow="never">
<el-form-item label="展开方向" prop="direction">
<el-radio-group v-model="formData.direction">
<el-radio label="vertical">垂直</el-radio>
<el-radio label="horizontal">水平</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="显示文字" prop="showText">
<el-switch v-model="formData.showText" />
</el-form-item>
</el-card>
<el-card header="按钮列表" class="property-group" shadow="never">
<Draggable v-model="formData.list" :empty-item="{ textColor: '#fff' }">
<template #default="{ element, index }">
<el-form-item label="图标" :prop="`list[${index}].imgUrl`">
<UploadImg v-model="element.imgUrl" height="56px" width="56px" />
</el-form-item>
<el-form-item label="文字" :prop="`list[${index}].text`">
<InputWithColor v-model="element.text" v-model:color="element.textColor" />
</el-form-item>
<el-form-item label="跳转链接" :prop="`list[${index}].url`">
<AppLinkInput v-model="element.url" />
</el-form-item>
</template>
</Draggable>
</el-card>
</el-form>
</template>
<script setup lang="ts">
import { FloatingActionButtonProperty } from './config'
import { usePropertyForm } from '@/components/DiyEditor/util'
//
defineOptions({ name: 'FloatingActionButtonProperty' })
const props = defineProps<{ modelValue: FloatingActionButtonProperty }>()
const emit = defineEmits(['update:modelValue'])
const { formData } = usePropertyForm(props.modelValue, emit)
</script>
<style scoped lang="scss"></style>

View File

@ -111,7 +111,15 @@ export const PAGE_LIBS = [
{
name: '基础组件',
extended: true,
components: ['SearchBar', 'NoticeBar', 'MenuSwiper', 'MenuGrid', 'MenuList', 'Popover']
components: [
'SearchBar',
'NoticeBar',
'MenuSwiper',
'MenuGrid',
'MenuList',
'Popover',
'FloatingActionButton'
]
},
{
name: '图文组件',