xs/xs-app/pages/search/search-nav.vue

<template>
	<view class="nav_content" :style="{height: height + 'rpx'}">
		<view class="container">
			<view class="container__content">
				<input class="container__content__input"
				v-model="search_content"
				placeholder="输入关键字"
				placeholder-class="#e9e9e9e"
				confirm-type="search"
				@input="onInput"
				@confirm="clickSearch"
				type="text" />
				<view class="container__content__btn" @click="clickSearch">搜索</view>
			</view>
		</view>
	</view>
	
</template>

<script setup lang="ts">
    import { ref } from 'vue';
	
	defineProps({
		height:Number,
	})
	let search_content = ref('')
	const emits = defineEmits(['clickSearch'])
	
	function onInput() {
		// console.log('search_content',search_content.value)
	}
	
	function clickSearch() {
		emits('clickSearch',search_content.value)
	}
	
</script>

<style lang="scss">
	.nav_content{
		position: fixed;
		display: flex;
		flex-direction: column;
		width: 100%;
		left: 0;
		/* #ifdef H5 */
		top: 44px;
		/* #endif */
		background-color: #ffffff;
		border-bottom-width: 1rpx;
		border-bottom-style: solid;
		border-bottom-color: #eee;
		// background-color: purple;
		
		.container{
			display: flex;
			flex-direction: column;
			height: 100%;
			// background-color: yellow;
			
			&__content {
				display: flex;
				flex-direction: row;
				align-items: center;
				margin-left: 3%;
				height: 100%;
				// background-color: green;
				&__input {
					padding: 0 2%;
					width: 80%;
					height: 70%;
					border-radius: 5rpx;
					border: #eee solid 2rpx;
					// background-color: skyblue;
				}
				&__btn {
					display: flex;
					width: 15%;
					height: 100%;
					justify-content: center;
					align-items: center;
					// background-color: blue;
				}
			}
		}
	}
	
</style>