Skip to content

Commit 6b45ed7

Browse files
YunaiVgitee-org
YunaiV
authored and
gitee-org
committed
!406 适配顶部导航
Merge pull request !406 from 疯狂的世界/dev
2 parents 1a0f0a1 + aa57d89 commit 6b45ed7

File tree

6 files changed

+263
-78
lines changed

6 files changed

+263
-78
lines changed

‎src/assets/imgs/diy/app-nav-bar-mp.png

3.51 KB
Loading

‎src/components/DiyEditor/components/mobile/NavigationBar/components/CellProperty.vue

Lines changed: 90 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,90 @@
1+
<template>
2+
<div class="h-40px flex items-center justify-center">
3+
<MagicCubeEditor
4+
v-model="cellList"
5+
class="m-b-16px"
6+
:rows="1"
7+
:cols="cellCount"
8+
:cube-size="38"
9+
@hot-area-selected="handleHotAreaSelected"
10+
/>
11+
<img src="@/assets/imgs/diy/app-nav-bar-mp.png" alt="" class="h-30px w-76px" v-if="isMp" />
12+
</div>
13+
<template v-for="(cell, cellIndex) in cellList" :key="cellIndex">
14+
<template v-if="selectedHotAreaIndex === cellIndex">
15+
<el-form-item label="类型" :prop="`cell[${cellIndex}].type`">
16+
<el-radio-group v-model="cell.type">
17+
<el-radio label="text">文字</el-radio>
18+
<el-radio label="image">图片</el-radio>
19+
<el-radio label="search">搜索框</el-radio>
20+
</el-radio-group>
21+
</el-form-item>
22+
<!-- 1. 文字 -->
23+
<template v-if="cell.type === 'text'">
24+
<el-form-item label="内容" :prop="`cell[${cellIndex}].text`">
25+
<el-input v-model="cell!.text" maxlength="10" show-word-limit />
26+
</el-form-item>
27+
<el-form-item label="颜色" :prop="`cell[${cellIndex}].text`">
28+
<ColorInput v-model="cell!.textColor" />
29+
</el-form-item>
30+
</template>
31+
<!-- 2. 图片 -->
32+
<template v-else-if="cell.type === 'image'">
33+
<el-form-item label="图片" :prop="`cell[${cellIndex}].imgUrl`">
34+
<UploadImg v-model="cell.imgUrl" :limit="1" height="56px" width="56px">
35+
<template #tip>建议尺寸 56*56</template>
36+
</UploadImg>
37+
</el-form-item>
38+
<el-form-item label="链接" :prop="`cell[${cellIndex}].url`">
39+
<AppLinkInput v-model="cell.url" />
40+
</el-form-item>
41+
</template>
42+
<!-- 3. 搜索框 -->
43+
<template v-else>
44+
<el-form-item label="提示文字" :prop="`cell[${cellIndex}].placeholder`">
45+
<el-input v-model="cell.placeholder" maxlength="10" show-word-limit />
46+
</el-form-item>
47+
<el-form-item label="圆角" :prop="`cell[${cellIndex}].borderRadius`">
48+
<el-slider
49+
v-model="cell.borderRadius"
50+
:max="100"
51+
:min="0"
52+
show-input
53+
input-size="small"
54+
:show-input-controls="false"
55+
/>
56+
</el-form-item>
57+
</template>
58+
</template>
59+
</template>
60+
</template>
61+
62+
<script setup lang="ts">
63+
import { NavigationBarCellProperty } from '../config'
64+
import { usePropertyForm } from '@/components/DiyEditor/util'
65+
// 导航栏属性面板
66+
defineOptions({ name: 'NavigationBarCellProperty' })
67+
68+
const props = defineProps<{
69+
modelValue: NavigationBarCellProperty[]
70+
isMp: boolean
71+
}>()
72+
const emit = defineEmits(['update:modelValue'])
73+
const { formData: cellList } = usePropertyForm(props.modelValue, emit)
74+
if (!cellList.value) cellList.value = []
75+
76+
// 单元格数量：小程序6个（右侧胶囊按钮占了2个），其它平台8个
77+
const cellCount = computed(() => (props.isMp ? 6 : 8))
78+
79+
// 选中的热区
80+
const selectedHotAreaIndex = ref(0)
81+
const handleHotAreaSelected = (cellValue: NavigationBarCellProperty, index: number) => {
82+
selectedHotAreaIndex.value = index
83+
if (!cellValue.type) {
84+
cellValue.type = 'text'
85+
cellValue.textColor = '#111111'
86+
}
87+
}
88+
</script>
89+
90+
<style scoped lang="scss"></style>

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

Lines changed: 64 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -2,22 +2,53 @@ import { DiyComponent } from '@/components/DiyEditor/util'
22

33
/** 顶部导航栏属性 */
44
export interface NavigationBarProperty {
5-
// 页面标题
6-
title: string
7-
// 页面描述
8-
description: string
9-
// 顶部导航高度
10-
navBarHeight: number
11-
// 页面背景颜色
12-
backgroundColor: string
13-
// 页面背景图片
14-
backgroundImage: string
5+
// 背景类型
6+
bgType: 'color' | 'img'
7+
// 背景颜色
8+
bgColor: string
9+
// 图片链接
10+
bgImg: string
1511
// 样式类型：默认 | 沉浸式
16-
styleType: 'default' | 'immersion'
12+
styleType: 'normal' | 'inner'
1713
// 常驻显示
1814
alwaysShow: boolean
19-
// 是否显示返回按钮
20-
showGoBack: boolean
15+
// 小程序单元格列表
16+
mpCells: NavigationBarCellProperty[]
17+
// 其它平台单元格列表
18+
otherCells: NavigationBarCellProperty[]
19+
// 本地变量
20+
_local: {
21+
// 预览顶部导航（小程序）
22+
previewMp: boolean
23+
// 预览顶部导航（非小程序）
24+
previewOther: boolean
25+
}
26+
}
27+
28+
/** 顶部导航栏 - 单元格 属性 */
29+
export interface NavigationBarCellProperty {
30+
// 类型：文字 | 图片 | 搜索框
31+
type: 'text' | 'image' | 'search'
32+
// 宽度
33+
width: number
34+
// 高度
35+
height: number
36+
// 顶部位置
37+
top: number
38+
// 左侧位置
39+
left: number
40+
// 文字内容
41+
text: string
42+
// 文字颜色
43+
textColor: string
44+
// 图片地址
45+
imgUrl: string
46+
// 图片链接
47+
url: string
48+
// 搜索框：提示文字
49+
placeholder: string
50+
// 搜索框：边框圆角半径
51+
borderRadius: number
2152
}
2253

2354
// 定义组件
@@ -26,13 +57,26 @@ export const component = {
2657
name: '顶部导航栏',
2758
icon: 'tabler:layout-navbar',
2859
property: {
29-
title: '页面标题',
30-
description: '',
31-
navBarHeight: 35,
32-
backgroundColor: '#fff',
33-
backgroundImage: '',
34-
styleType: 'default',
60+
bgType: 'color',
61+
bgColor: '#fff',
62+
bgImg: '',
63+
styleType: 'normal',
3564
alwaysShow: true,
36-
showGoBack: true
65+
mpCells: [
66+
{
67+
type: 'text',
68+
textColor: '#111111'
69+
}
70+
],
71+
otherCells: [
72+
{
73+
type: 'text',
74+
textColor: '#111111'
75+
}
76+
],
77+
_local: {
78+
previewMp: true,
79+
previewOther: false
80+
}
3781
}
3882
} as DiyComponent<NavigationBarProperty>

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

Lines changed: 54 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,45 +1,73 @@
11
<template>
2-
<div
3-
class="navigation-bar"
4-
:style="{
5-
height: `${property.navBarHeight}px`,
6-
backgroundColor: property.backgroundColor,
7-
backgroundImage: `url(${property.backgroundImage})`
8-
}"
9-
>
10-
<!-- 左侧 -->
11-
<div class="left">
12-
<Icon icon="ep:arrow-left" v-show="property.showGoBack" />
2+
<div class="navigation-bar" :style="bgStyle">
3+
<div class="h-full w-full flex items-center">
4+
<div v-for="(cell, cellIndex) in cellList" :key="cellIndex" :style="getCellStyle(cell)">
5+
<span v-if="cell.type === 'text'">{{ cell.text }}</span>
6+
<img v-else-if="cell.type === 'image'" :src="cell.imgUrl" alt="" class="h-full w-full" />
7+
<SearchBar v-else :property="getSearchProp" />
8+
</div>
139
</div>
14-
<!-- 中间 -->
15-
<div
16-
class="center"
17-
:style="{
18-
height: `${property.navBarHeight}px`,
19-
lineHeight: `${property.navBarHeight}px`
20-
}"
21-
>
22-
{{ property.title }}
23-
</div>
24-
<!-- 右侧 -->
25-
<div class="right"></div>
10+
<img
11+
v-if="property._local?.previewMp"
12+
src="@/assets/imgs/diy/app-nav-bar-mp.png"
13+
alt=""
14+
class="h-30px w-86px"
15+
/>
2616
</div>
2717
</template>
2818
<script setup lang="ts">
29-
import { NavigationBarProperty } from './config'
19+
import { NavigationBarCellProperty, NavigationBarProperty } from './config'
20+
import SearchBar from '@/components/DiyEditor/components/mobile/SearchBar/index.vue'
21+
import { StyleValue } from 'vue'
22+
import { SearchProperty } from '@/components/DiyEditor/components/mobile/SearchBar/config'
3023
3124
/** 页面顶部导航栏 */
3225
defineOptions({ name: 'NavigationBar' })
3326
34-
defineProps<{ property: NavigationBarProperty }>()
27+
const props = defineProps<{ property: NavigationBarProperty }>()
28+
29+
// 背景
30+
const bgStyle = computed(() => {
31+
const background =
32+
props.property.bgType === 'img' && props.property.bgImg
33+
? `url(${props.property.bgImg}) no-repeat top center / 100% 100%`
34+
: props.property.bgColor
35+
return { background }
36+
})
37+
// 单元格列表
38+
const cellList = computed(() =>
39+
props.property._local?.previewMp ? props.property.mpCells : props.property.otherCells
40+
)
41+
// 单元格宽度
42+
const cellWidth = computed(() => {
43+
return props.property._local?.previewMp ? (375 - 80 - 86) / 6 : (375 - 90) / 8
44+
})
45+
// 获得单元格样式
46+
const getCellStyle = (cell: NavigationBarCellProperty) => {
47+
return {
48+
width: cell.width * cellWidth.value + (cell.width - 1) * 10 + 'px',
49+
left: cell.left * cellWidth.value + (cell.left + 1) * 10 + 'px',
50+
position: 'absolute'
51+
} as StyleValue
52+
}
53+
// 获得搜索框属性
54+
const getSearchProp = (cell: NavigationBarCellProperty) => {
55+
return {
56+
height: 30,
57+
showScan: false,
58+
placeholder: cell.placeholder,
59+
borderRadius: cell.borderRadius
60+
} as SearchProperty
61+
}
3562
</script>
3663
<style lang="scss" scoped>
3764
.navigation-bar {
3865
display: flex;
39-
height: 35px;
66+
height: 50px;
4067
background: #fff;
4168
justify-content: space-between;
4269
align-items: center;
70+
padding: 0 6px;
4371
4472
/* 左边 */
4573
.left {

0 commit comments

Comments
 (0)