From eec83c1648f3fb32dd2ffd8c682a7261e5007905 Mon Sep 17 00:00:00 2001
From: Huang <596417202@qq.com>
Date: Thu, 1 Dec 2022 17:41:38 +0800
Subject: [PATCH] feat-navbar component
---
src/components/Iconify/index.vue | 16 ++++++-
src/components/Navbar/index.vue | 78 ++++++++++++++++++++++++++++----
src/pages.json | 3 +-
src/pages/index/index.vue | 1 +
src/pagesA/list/test2/index.vue | 8 +++-
src/pagesB/detail/index.vue | 11 +----
6 files changed, 94 insertions(+), 23 deletions(-)
diff --git a/src/components/Iconify/index.vue b/src/components/Iconify/index.vue
index 4570001..26d8fb7 100644
--- a/src/components/Iconify/index.vue
+++ b/src/components/Iconify/index.vue
@@ -25,9 +25,19 @@
props.color ? { color: props.color } : {},
);
});
+
+ const emit = defineEmits(['click']);
+ const onClick = () => {
+ emit('click');
+ };
</script>
<template>
- <view ref="elRef" :class="['iconify', icon]" :style="style"></view>
+ <view
+ ref="elRef"
+ @click="onClick"
+ :class="['iconify', icon]"
+ :style="style"
+ ></view>
</template>
<style lang="scss" scoped>
.iconify {
@@ -36,5 +46,9 @@
height: 44rpx;
width: 44rpx;
color: inherit;
+ &:hover {
+ cursor: pointer;
+ opacity: 0.8;
+ }
}
</style>
diff --git a/src/components/Navbar/index.vue b/src/components/Navbar/index.vue
index 475b968..cc5ed6d 100644
--- a/src/components/Navbar/index.vue
+++ b/src/components/Navbar/index.vue
@@ -1,9 +1,15 @@
<script lang="ts" setup name="Navbar">
+ /**
+ * 头部导航栏
+ * @description 所有尺寸都用px2rpx做适配
+ */
import { useSystem } from '@/hooks/useSystem';
import { px2rpx } from '@/utils/uniapi';
import { computed, ref } from 'vue';
- import { useRoute } from '@/hooks/router';
+ import { useRoute, useRouter } from '@/hooks/router';
import { useGlobalStyle } from '@/hooks/useGlobalStyle';
+ import Iconify from '@/components/Iconify/index.vue';
+ import { HOME_PAGE } from '@/enums/routerEnum';
const {
navigationBarBackgroundColor,
@@ -11,25 +17,32 @@
navigationBarTextStyle,
} = useGlobalStyle();
- const { currentRoute } = useRoute();
+ const { currentRoute, currentPages } = useRoute();
const props = defineProps({
bgColor: { type: String },
title: { type: String },
titleColor: { type: String },
- gap: { type: [String, Number], default: 24 },
+ titleSize: { type: [String, Number] },
+ iconSize: { type: [String, Number] },
+ gap: { type: Number, default: 8 },
+ isBackShow: { type: Boolean, default: true },
+ isHomeShow: { type: Boolean },
+ shadow: { type: Boolean, default: true },
});
const { statusBarHeight } = useSystem();
const statusHeight = computed(() => `${px2rpx(statusBarHeight!)}rpx`);
const defaultNavbarHeight = ref(44);
+ const defaultTitleSize = ref(16);
+ const defaultIconSize = ref(24);
const navbarHeight = computed(
() => `${px2rpx(defaultNavbarHeight.value)}rpx`,
);
const headHeight = computed(
() => `${px2rpx((statusBarHeight || 0) + defaultNavbarHeight.value)}rpx`,
);
- const sideGap = computed(() => `${props.gap}rpx`);
+ const sideGap = computed(() => `${px2rpx(props.gap)}rpx`);
const navbarBgColor = computed(
() => props.bgColor || navigationBarBackgroundColor,
);
@@ -45,20 +58,65 @@
currentRoute?.style?.navigationBarTextStyle ||
navigationBarTextStyle,
);
+ const navbarTitleSize = computed(() => {
+ return `${px2rpx(defaultTitleSize.value) || props.titleSize}rpx`;
+ });
+ const navbarLeftIconSize = computed(() => {
+ return `${px2rpx(defaultIconSize.value) || props.titleSize}`;
+ });
+ const backShow = computed(() => {
+ return currentPages.length > 1 && props.isBackShow;
+ });
+ const backHomeShow = computed(() => {
+ return !currentRoute?.meta?.tabBar && props.isHomeShow;
+ });
+
+ const router = useRouter();
+ const onBack = () => {
+ router.back();
+ };
+ const onBackHome = () => {
+ router.pushTab(HOME_PAGE);
+ };
</script>
<template>
<view class="head-wrapper">
- <view class="page-head _u_head-fixed">
+ <view :class="['page-head', '_u_head-fixed', '_u_shadow']">
<!-- 顶部状态栏 -->
<view class="status-bar"></view>
<!-- navbar -->
<view
- class="navbar-wrapper _u_flex _u_flex-nowrap _u_justify-between _u_items-center"
+ :class="[
+ 'navbar-wrapper',
+ '_u_flex',
+ '_u_flex-nowrap',
+ '_u_justify-between',
+ '_u_items-center',
+ ]"
>
<view
- class="_u_flex _u_flex-nowrap _u_justify-flex-start _u_items-center _u_h-full _u_w3/10 _u_min-w3/10"
+ class="_u_flex _u_flex-nowrap _u_items-center _u_h-full _u_w3/10 _u_min-w3/10"
>
- <slot name="left">left</slot>
+ <slot name="left">
+ <view class="_u_h-full _u_flex _u_items-center">
+ <template v-if="backShow">
+ <Iconify
+ @click="onBack"
+ :size="navbarLeftIconSize"
+ :color="navbarTitleColor"
+ icon="i-humbleicons-chevron-left"
+ />
+ </template>
+ <template v-if="backHomeShow">
+ <Iconify
+ @click="onBackHome"
+ :size="navbarLeftIconSize"
+ :color="navbarTitleColor"
+ icon="i-iconoir-home-simple-door"
+ />
+ </template>
+ </view>
+ </slot>
</view>
<view
class="navbar__center _u_flex _u_flex-nowrap _u_justify-center _u_items-center _u_h-full _u_w2/5 _u_min-w2/5"
@@ -68,7 +126,7 @@
</slot>
</view>
<view
- class="_u_flex _u_flex-nowrap _u_justify-flex-end _u_items-center _u_h-full _u_w3/10 _u_min-w3/10"
+ class="_u_flex _u_flex-nowrap _u_justify-end _u_items-center _u_h-full _u_w3/10 _u_min-w3/10"
>
<slot name="right"></slot>
</view>
@@ -90,6 +148,8 @@
padding-left: v-bind(sideGap);
padding-right: v-bind(sideGap);
.navbar__center {
+ font-weight: bold;
+ font-size: v-bind(navbarTitleSize);
color: v-bind(navbarTitleColor);
}
}
diff --git a/src/pages.json b/src/pages.json
index 3a232db..7366ef7 100644
--- a/src/pages.json
+++ b/src/pages.json
@@ -66,7 +66,8 @@
},{
"path": "list/test2/index",
"style": {
- "navigationBarTitleText": "test2"
+ "navigationBarTitleText": "test2",
+ "navigationStyle":"custom"
},
"meta": {
"ignoreAuth": true
diff --git a/src/pages/index/index.vue b/src/pages/index/index.vue
index 728cdef..21ad202 100644
--- a/src/pages/index/index.vue
+++ b/src/pages/index/index.vue
@@ -17,6 +17,7 @@
const router = useRouter();
const handleGetStarted = () => {
router.pushTab('/pages/demo/index');
+ // router.push('/pages/log/index?id=4345&title=log');
};
</script>
<template>
diff --git a/src/pagesA/list/test2/index.vue b/src/pagesA/list/test2/index.vue
index e51301c..2dafc4d 100644
--- a/src/pagesA/list/test2/index.vue
+++ b/src/pagesA/list/test2/index.vue
@@ -1,6 +1,7 @@
<script lang="ts" setup>
import BasicButton from '@/components/BasicButton/index.vue';
import { useRouter } from '@/hooks/router';
+ import Navbar from '@/components/Navbar/index.vue';
const router = useRouter();
const jumpDetail = () => {
@@ -8,7 +9,10 @@
};
</script>
<template>
- <view> Test2 </view>
- <BasicButton @click="jumpDetail">Detail → </BasicButton>
+ <view>
+ <Navbar />
+ <view> Test2 </view>
+ <BasicButton @click="jumpDetail">Detail → </BasicButton>
+ </view>
</template>
<style scoped></style>
diff --git a/src/pagesB/detail/index.vue b/src/pagesB/detail/index.vue
index c39974f..53e96c8 100644
--- a/src/pagesB/detail/index.vue
+++ b/src/pagesB/detail/index.vue
@@ -1,12 +1,3 @@
-<script lang="ts" setup>
- import { onLoad } from '@dcloudio/uni-app';
- import { useRoute } from '@/hooks/router';
-
- // const route = useRoute();
-
- onLoad(() => {
- const route = useRoute();
- });
-</script>
+<script lang="ts" setup></script>
<template> Detail </template>
<style scoped></style>