workApp/components/nav-bar.vue

<template>
	<uni-nav-bar :class="{'custom_uni_nav_bar':!onlyTitle,'custom_navbar_only_title':onlyTitle}" :height="`${height}rpx`" :backgroundColor="backgroundColor" :title="title" color="#333333" :fixed="true" :border="showHeaderborder" :statusBar="true" :leftWidth="leftWidth" :rightWidth="rightWidth" left-icon="left" @clickLeft="GoBack()">
		<!-- 表头内容 -->
		<view class="nav_head" v-if="!onlyTitle">
			<text class="nav_title">{{title}}</text>
			<uni-easyinput class="search_box" v-model="state.searchWord" trim="all" :styles="state.searchInputStyles" :placeholderStyle="state.searchInputPlaceholderStyle" placeholder="请输入关键字搜索" @input="handleSearchInput">
				<template #left>
					<image src="/static/image/overview/search.png" class="search_icon" ></image>
				</template>
			</uni-easyinput>
		</view>
		<!-- 条件选择器 -->
		<view class="filter_picker">
			<!-- 通知类型筛选 -->
			<picker mode="selector" v-for="(item,index) in filterPickerData" :key="index" :range="item" :value="state.pickerIndex" @change="handleTypeChange" style="width: calc((100% - 32rpx * 2) / 3);">
				<view class="filter_item">
					<text class="filter_text">{{ item[state.pickerIndex] }}</text>
					<uni-icons type="down" size="16" color="#999999"></uni-icons>
				</view>
			</picker>
		</view>
		<!-- tabs -->
		<scroll-view class="scroll_tabs" scroll-x="true" scroll-left="0" :show-scrollbar="false">
			<view :class="['tab_item',{'selected':item.sortType==state.tabsSelected}]" v-for="item in tabList" :key="item.sortType" @click="SelectMenu(item.sortType)">
				{{item.name}}
			</view>
		</scroll-view>
	</uni-nav-bar>
</template>

<script setup>
	import uniNavBar from '@/uni_modules/uni-nav-bar/components/uni-nav-bar/uni-nav-bar.vue';
	import uniIcons from '@/uni_modules/uni-icons/components/uni-icons/uni-icons.vue';
	import { reactive } from 'vue';
	const emit = defineEmits(['GoBack']);
	const props = defineProps({
		height: {//高度
			type: String,
			default: () => ''
		},
		leftWidth: {//导航栏左侧插槽宽度
			type: String,
			default: () => '96rpx'
		},
		rightWidth: {//导航栏右侧插槽宽度
			type: String,
			default: () => '96rpx'
		},
		title: {//标题
			type: String,
			default: () => ''
		},
		showHeaderborder:{//是否显示边框 默认不显示
			type:Boolean,
			default:false
		},
		backgroundColor: {//背景色
			type: String,
			default: () => '#FFFFFF'
		},
		backPath: {//返回路径
			type: String,
			default: () => ''
		},
		onlyTitle:{//是否只显示标题
			type:Boolean,
			default:true
		},
		filterPickerData:{//条件选择器
			type:Array,
			default:()=>[]
		},
		tabList:{//tabs
			type:Array,
			default:()=>[]
		}
	});
	const state = reactive({
		pickerIndex:0,
		tabsSelected:'1',
		searchWord:'',
		searchInputStyles:{
			borderColor:'#DCDFE6',
			color:'#333333'
		},
		searchInputPlaceholderStyle:{
			color: '#C0C4CC',
			fontSize: '28rpx'
		}
	})
	const GoBack = () => {
		if (props.backPath == 'myIndex') {
			uni.switchTab({
				url: '/pages/my/index'
			});
		}else if(props.backPath == 'workspace') {//跳转工作台
			uni.switchTab({
				url: '/pages/workspace/index'
			});
		} else {
			emit('GoBack');
		}
	}
</script>

<style scoped lang="scss">
	:deep(.uni-navbar__header) {
		padding: 0;
		position: relative;
		z-index: 999;
	}
	:deep(.uni-navbar__header-container) {
		padding: 0;
	}
</style>