workApp/components/search-bar.vue

<template>
	<!-- 搜索栏 -->
	<view class="search_container" :style="containerStyle">
			<view class="search_box">
				<image src="/static/image/icon/search.png" class="search_icon" mode="aspectFit"></image>
				<input type="text" class="search_input" :value="modelValue" @input="handleInput"
					placeholder="请输入关键字搜索" />
			</view>
		</view>

</template>

<script setup>
import { computed } from 'vue';

const props = defineProps({
	modelValue: {
		type: String,
		default: ''
	},
	top: {
		type: [String, Number],
		default: ''
	},
	isFixed: {
		type: Boolean,
		default: false
	},
	zIndex: {
		type: [String, Number],
		default: '98'
	},
	border: {
		type: Boolean,
		default: true
	}
});

const emit = defineEmits(['update:modelValue', 'search']);

const containerStyle = computed(() => {
	const style = {};
	if (props.isFixed) {
		style.position = 'fixed';
		style.left = '0';
		style.right = '0';
		style.zIndex = props.zIndex;
	}
	if (props.top) {
		style.top = typeof props.top === 'number' ? `${props.top}rpx` : props.top;
	}
	if (props.border) {
		style.borderBottom = '2rpx solid #F3F3F3';
	} else {
		style.borderBottom = 'none';
	}
	return style;
});

const handleInput = (e) => {
	const value = e.detail.value;
	emit('update:modelValue', value);
	emit('search', value);
};
</script>

<style lang="scss">

.search_container {
	padding-bottom: 24rpx;
	margin: 0 24rpx;
	border-bottom: 2rpx solid #F3F3F3;
	display: flex;

	.search_box {
		flex: 1;
		display: flex;
		align-items: center;
		padding: 0rpx 24rpx;
		height: 72rpx;
		line-height: 72rpx;
		border-radius: 8rpx;
		border: 2rpx solid #DCDFE6;

		.search_icon {
			width: 32rpx;
			height: 32rpx;
			margin-right: 8rpx;
		}

		.search_input {
			flex: 1;
			height: 72rpx;
			font-size: 28rpx;
			color: #333333;
			padding-right: 24rpx;
			box-sizing: border-box;
		}
	}
}
</style>