Skip to content

Commit aedf014

Browse files
owen118zowen118z
committed
营销：装修页面适配搜索框
1 parent a9faeb1 commit aedf014

File tree

9 files changed

+332
-90
lines changed

9 files changed

+332
-90
lines changed

‎src/components/DiyEditor/components/ComponentContainer.vue

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
<template>
2+
<div
3+
:style="{
4+
...style,
5+
background: property.bgType === 'color' ? property.bgColor : `url(${property.bgImg})`
6+
}"
7+
>
8+
<slot></slot>
9+
</div>
10+
</template>
11+
12+
<script setup lang="ts">
13+
import { ComponentStyle } from '@/components/DiyEditor/util'
14+
15+
/**
16+
* 组件容器
17+
* 用于包裹组件，为组件提供 背景、外边距、内边距、边框等样式
18+
*/
19+
defineOptions({ name: 'ComponentContainer' })
20+
21+
const props = defineProps<{ property: ComponentStyle }>()
22+
23+
const style = computed(() => {
24+
if (!props.property) {
25+
return {}
26+
}
27+
return {
28+
marginTop: `${props.property.marginTop || 0}px`,
29+
marginBottom: `${props.property.marginBottom || 0}px`,
30+
marginLeft: `${props.property.marginLeft || 0}px`,
31+
marginRight: `${props.property.marginRight || 0}px`,
32+
paddingTop: `${props.property.paddingTop || 0}px`,
33+
paddingRight: `${props.property.paddingRight || 0}px`,
34+
paddingBottom: `${props.property.paddingBottom || 0}px`,
35+
paddingLeft: `${props.property.paddingLeft || 0}px`,
36+
borderTopLeftRadius: `${props.property.borderTopLeftRadius || 0}px`,
37+
borderTopRightRadius: `${props.property.borderTopRightRadius || 0}px`,
38+
borderBottomRightRadius: `${props.property.borderBottomRightRadius || 0}px`,
39+
borderBottomLeftRadius: `${props.property.borderBottomLeftRadius || 0}px`,
40+
overflow: 'hidden'
41+
}
42+
})
43+
</script>
44+
45+
<style scoped lang="scss"></style>

‎src/components/DiyEditor/components/ComponentContainerProperty.vue

Lines changed: 164 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,164 @@
1+
<template>
2+
<el-tabs stretch>
3+
<el-tab-pane label="内容">
4+
<slot></slot>
5+
</el-tab-pane>
6+
<el-tab-pane label="样式" lazy>
7+
<el-card header="组件样式" class="property-group">
8+
<el-form :model="formData" label-width="80px">
9+
<el-form-item label="组件背景" prop="bgType">
10+
<el-radio-group v-model="formData.bgType">
11+
<el-radio label="color">纯色</el-radio>
12+
<el-radio label="img">图片</el-radio>
13+
</el-radio-group>
14+
</el-form-item>
15+
<el-form-item label="选择颜色" prop="bgColor" v-if="formData.bgType === 'color'">
16+
<ColorInput v-model="formData.bgColor" />
17+
</el-form-item>
18+
<el-form-item label="上传图片" prop="bgImg" v-else>
19+
<UploadImg v-model="formData.bgImg" :limit="1">
20+
<template #tip>建议宽度 750px</template>
21+
</UploadImg>
22+
</el-form-item>
23+
<el-tree :data="treeData" :expand-on-click-node="false">
24+
<template #default="{ node, data }">
25+
<el-form-item
26+
:label="data.label"
27+
:prop="data.prop"
28+
:label-width="node.level === 1 ? '80px' : '62px'"
29+
class="tree-form-item w-full m-b-0!"
30+
>
31+
<el-slider
32+
v-model="formData[data.prop]"
33+
:max="100"
34+
:min="0"
35+
show-input
36+
input-size="small"
37+
:show-input-controls="false"
38+
@input="handleSliderChange(data.prop)"
39+
/>
40+
</el-form-item>
41+
</template>
42+
</el-tree>
43+
</el-form>
44+
</el-card>
45+
</el-tab-pane>
46+
</el-tabs>
47+
</template>
48+
49+
<script setup lang="ts">
50+
import { ComponentStyle, usePropertyForm } from '@/components/DiyEditor/util'
51+
52+
/**
53+
* 组件容器属性
54+
* 用于包裹组件，为组件提供 背景、外边距、内边距、边框等样式
55+
*/
56+
defineOptions({ name: 'ComponentContainer' })
57+
58+
const props = defineProps<{ modelValue: ComponentStyle }>()
59+
const emit = defineEmits(['update:modelValue'])
60+
const { formData } = usePropertyForm(props.modelValue, emit)
61+
62+
const treeData = [
63+
{
64+
label: '外部边距',
65+
prop: 'margin',
66+
children: [
67+
{
68+
label: '上',
69+
prop: 'marginTop'
70+
},
71+
{
72+
label: '右',
73+
prop: 'marginRight'
74+
},
75+
{
76+
label: '下',
77+
prop: 'marginBottom'
78+
},
79+
{
80+
label: '左',
81+
prop: 'marginLeft'
82+
}
83+
]
84+
},
85+
{
86+
label: '内部边距',
87+
prop: 'padding',
88+
children: [
89+
{
90+
label: '上',
91+
prop: 'paddingTop'
92+
},
93+
{
94+
label: '右',
95+
prop: 'paddingRight'
96+
},
97+
{
98+
label: '下',
99+
prop: 'paddingBottom'
100+
},
101+
{
102+
label: '左',
103+
prop: 'paddingLeft'
104+
}
105+
]
106+
},
107+
{
108+
label: '边框圆角',
109+
prop: 'borderRadius',
110+
children: [
111+
{
112+
label: '上左',
113+
prop: 'borderTopLeftRadius'
114+
},
115+
{
116+
label: '上右',
117+
prop: 'borderTopRightRadius'
118+
},
119+
{
120+
label: '下右',
121+
prop: 'borderBottomRightRadius'
122+
},
123+
{
124+
label: '下左',
125+
prop: 'borderBottomLeftRadius'
126+
}
127+
]
128+
}
129+
]
130+
131+
const handleSliderChange = (prop: string) => {
132+
switch (prop) {
133+
case 'margin':
134+
formData.value.marginTop = formData.value.margin
135+
formData.value.marginRight = formData.value.margin
136+
formData.value.marginBottom = formData.value.margin
137+
formData.value.marginLeft = formData.value.margin
138+
break
139+
case 'padding':
140+
formData.value.paddingTop = formData.value.padding
141+
formData.value.paddingRight = formData.value.padding
142+
formData.value.paddingBottom = formData.value.padding
143+
formData.value.paddingLeft = formData.value.padding
144+
break
145+
case 'borderRadius':
146+
formData.value.borderTopLeftRadius = formData.value.borderRadius
147+
formData.value.borderTopRightRadius = formData.value.borderRadius
148+
formData.value.borderBottomRightRadius = formData.value.borderRadius
149+
formData.value.borderBottomLeftRadius = formData.value.borderRadius
150+
break
151+
}
152+
}
153+
</script>
154+
155+
<style scoped lang="scss">
156+
.tree-form-item {
157+
:deep(.el-slider__runway) {
158+
margin-right: 16px;
159+
}
160+
:deep(.el-input-number) {
161+
width: 50px;
162+
}
163+
}
164+
</style>

‎src/components/DiyEditor/components/ComponentLibrary.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<template>
2-
<el-aside class="editor-left" width="260px">
2+
<el-aside class="editor-left" width="261px">
33
<el-scrollbar>
44
<el-collapse v-model="extendGroups">
55
<el-collapse-item

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@ export const component = {
2929
title: '页面标题',
3030
description: '',
3131
navBarHeight: 35,
32-
backgroundColor: '#f5f5f5',
32+
backgroundColor: '#fff',
3333
backgroundImage: '',
3434
styleType: 'default',
3535
alwaysShow: true,

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

Lines changed: 14 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { DiyComponent } from '@/components/DiyEditor/util'
1+
import { ComponentStyle, DiyComponent } from '@/components/DiyEditor/util'
22

33
/** 搜索框属性 */
44
export interface SearchProperty {
@@ -7,10 +7,10 @@ export interface SearchProperty {
77
borderRadius: number // 框体样式
88
placeholder: string // 占位文字
99
placeholderPosition: PlaceholderPosition // 占位文字位置
10-
backgroundColor: string // 背景颜色
11-
borderColor: string // 框体颜色
10+
backgroundColor: string // 框体颜色
1211
textColor: string // 字体颜色
1312
hotKeywords: string[] // 热词
13+
style: ComponentStyle
1414
}
1515

1616
// 文字位置
@@ -27,9 +27,17 @@ export const component = {
2727
borderRadius: 0,
2828
placeholder: '搜索商品',
2929
placeholderPosition: 'left',
30-
backgroundColor: 'rgb(249, 249, 249)',
31-
borderColor: 'rgb(255, 255, 255)',
30+
backgroundColor: 'rgb(238, 238, 238)',
3231
textColor: 'rgb(150, 151, 153)',
33-
hotKeywords: []
32+
hotKeywords: [],
33+
style: {
34+
bgType: 'color',
35+
bgColor: '#fff',
36+
marginBottom: 8,
37+
paddingTop: 8,
38+
paddingRight: 8,
39+
paddingBottom: 8,
40+
paddingLeft: 8
41+
} as ComponentStyle
3442
}
3543
} as DiyComponent<SearchProperty>

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

Lines changed: 2 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,6 @@
22
<div
33
class="search-bar"
44
:style="{
5-
background: property.backgroundColor,
6-
border: `1px solid ${property.backgroundColor}`,
75
color: property.textColor
86
}"
97
>
@@ -12,7 +10,7 @@
1210
class="inner"
1311
:style="{
1412
height: `${property.height}px`,
15-
background: property.borderColor,
13+
background: property.backgroundColor,
1614
borderRadius: `${property.borderRadius}px`
1715
}"
1816
>
@@ -44,13 +42,11 @@ defineProps<{ property: SearchProperty }>()
4442

4543
<style scoped lang="scss">
4644
.search-bar {
47-
position: relative;
45+
width: 375px;
4846
/* 搜索框 */
4947
.inner {
5048
position: relative;
51-
width: calc(100% - 16px);
5249
min-height: 28px;
53-
margin: 5px auto;
5450
display: flex;
5551
align-items: center;
5652
font-size: 14px;

0 commit comments

Comments
 (0)