wanzai_school_app/components/headerInput.vue

<template>
	<view class="container">
		<uni-icons type="search" size="24" color="#808080"></uni-icons>
		<input class="input" type="text" :placeholder="placeholder" placeholder-style="color:#CCCCCC;font-size:28rpx" @input="handleInput" />
	</view>
</template>

<script setup>
import { ref } from 'vue'

defineProps({
	placeholder: {
		type: String,
		default: '请输入关键词'
	}
})

const $emit = defineEmits(['changeInputValue'])

const timer = ref(null)

const handleInput = (e) => {
	if (timer.value) {
		clearTimeout(timer.value)
	}
	timer.value = setTimeout(() => {
		$emit('changeInputValue', e.detail.value)
	}, 500)
}
</script>

<style lang="scss" scoped>
.container {
	position: relative;
	display: flex;
	align-items: center;
	box-sizing: border-box;
	padding: 0 40rpx;
	margin-top: 30rpx;
	width: 710rpx;
	height: 100rpx;
	border-radius: 80rpx;
	border: 1rpx solid #ccc;
	background-color: #fff;

	.input {
		margin-left: 16rpx;
		width: 100%;
		height: 100%;
	}
}
</style>