feat-navbar component

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>

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);
         }
       }

src/pages.json

@@ -66,7 +66,8 @@
     },{
       "path": "list/test2/index",
       "style": {
-        "navigationBarTitleText": "test2"
+        "navigationBarTitleText": "test2",
+        "navigationStyle":"custom"
       },
       "meta": {
         "ignoreAuth": true

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>

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>
+  <view>
-  <BasicButton @click="jumpDetail">Detail → </BasicButton>
+    <Navbar />
+    <view> Test2 </view>
+    <BasicButton @click="jumpDetail">Detail → </BasicButton>
+  </view>
 </template>
 <style scoped></style>

src/pagesB/detail/index.vue

@@ -1,12 +1,3 @@
-<script lang="ts" setup>
+<script lang="ts" setup></script>
-  import { onLoad } from '@dcloudio/uni-app';
-  import { useRoute } from '@/hooks/router';
-
-  // const route = useRoute();
-
-  onLoad(() => {
-    const route = useRoute();
-  });
-</script>
 <template> Detail </template>
 <style scoped></style>