blackteay/uniapp-vue3-vite-ts-template
1
0
Fork 0
mirror of https://gitee.com/h_mo/uniapp-vue3-vite-ts-template synced 2025-04-05 06:12:44 +08:00
Code Issues Projects Releases Wiki Activity

pref: 删除暂时无用的Navbar组件

Browse Source
This commit is contained in:
h_mo 2023-07-02 13:23:14 +08:00
parent 4bd19e674b
commit 04b6cb0635
2 changed files with 1 additions and 131 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/components/Iconify/index.vue
View File

@ -1,5 +1,4 @@
<script lang="ts" setup name="Iconify"> <script lang="ts" setup name="Iconify">
import { computed, ref, unref } from 'vue';
import { assign } from 'lodash-es'; import { assign } from 'lodash-es';
import { isBoolean } from '@/utils/is'; import { isBoolean } from '@/utils/is';
@ -15,7 +14,7 @@ const props = defineProps({
}, },
}); });
const iconSize = ref<string | boolean>(props.size ? `${props.size}rpx` : false); const iconSize = computed<string | boolean>(() => (props.size ? `${props.size}rpx` : false));
let style = computed(() => { let style = computed(() => {
let ISize = unref(iconSize); let ISize = unref(iconSize);
return assign({ width: isBoolean(ISize) ? '' : ISize, height: isBoolean(ISize) ? '' : ISize }, { color: props.color }); return assign({ width: isBoolean(ISize) ? '' : ISize, height: isBoolean(ISize) ? '' : ISize }, { color: props.color });

129
src/components/Navbar/index.vue
View File

@ -1,129 +0,0 @@
<script lang="ts" setup name="Navbar">
/**
* 头部导航栏
* @description 所有尺寸都用px2rpx做适配
*/
import { useSystem } from '@/hooks/app/useSystem';
import { px2rpx } from '@/utils/uniapi';
import { computed, ref } from 'vue';
import { useRoute, useRouter } from 'uni-mini-router';
import { useGlobalStyle } from '@/hooks/app/useGlobalStyle';
import Iconify from '@/components/Iconify/index.vue';
import { HOME_PAGE } from '@/enums/routerEnum';
const { navigationBarBackgroundColor, navigationBarTitleText, navigationBarTextStyle } = useGlobalStyle();
const { currentRoute, currentPages } = useRoute();
const props = defineProps({
bgColor: { type: String },
title: { type: String },
titleColor: { type: String },
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(() => `${px2rpx(props.gap)}rpx`);
const navbarBgColor = computed(() => props.bgColor || navigationBarBackgroundColor);
const navbarTitle = computed(() => props.title || currentRoute?.style?.navigationBarTitleText || navigationBarTitleText);
const navbarTitleColor = computed(() => props.titleColor || 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', '_u_shadow']">
<!-- 顶部状态栏 -->
<view class="status-bar"></view>
<!-- navbar -->
<view :class="['navbar-wrapper', '_u_flex', '_u_flex-nowrap', '_u_justify-between', '_u_items-center']">
<view class="_u_flex _u_flex-nowrap _u_items-center _u_h-full _u_w3/10 _u_min-w3/10">
<slot name="left">
<view class="_u_h-full _u_flex _u_items-center">
<template v-if="backShow">
<Iconify
@click="onBack"
:size="navbarLeftIconSize"
:color="navbarTitleColor === true ? undefined : navbarTitleColor"
icon="i-humbleicons-chevron-left"
/>
</template>
<template v-if="backHomeShow">
<Iconify
@click="onBackHome"
:size="navbarLeftIconSize"
:color="navbarTitleColor === true ? undefined : 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">
<slot>
<text>{{ navbarTitle }}</text>
</slot>
</view>
<view 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>
</view>
</view>
<!-- 占位符 -->
<view class="placeholder"></view>
</view>
</template>
<style lang="scss" scoped>
.head-wrapper {
.page-head {
background: v-bind(navbarBgColor);
.status-bar {
height: v-bind(statusHeight);
}
.navbar-wrapper {
height: v-bind(navbarHeight);
padding-left: v-bind(sideGap);
padding-right: v-bind(sideGap);
.navbar__center {
font-weight: bold;
font-size: v-bind(navbarTitleSize);
color: v-bind(navbarTitleColor);
}
}
}
&,
.placeholder {
height: v-bind(headHeight);
min-height: v-bind(headHeight);
}
}
</style>