school_ecology_h5/components/common-search/common-search.vue

<template>
	<view class="common_search">
		<uni-icons type="search" size="30" color="#999999"></uni-icons>
		<input v-model="searchValue" class="input" type="text" :placeholder="placeholder" />
		<view class="btn" @click="handleSearch">搜索</view>
	</view>
</template>

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

defineProps(['placeholder'])
const $emit = defineEmits(['change'])

// 搜索框绑定值
const searchValue = ref('')

// 点击搜索按钮回调
const handleSearch = () => {
	// console.log(searchValue.value)
	// if (searchValue.value.trim()) {
	// 	$emit('change', searchValue.value.trim())
	// }

	$emit('change', searchValue.value.trim())
}
</script>

<style lang="scss" scoped>
.common_search {
	display: flex;
	align-items: center;
	padding: 0 5rpx 0 35rpx;
	width: 714rpx;
	height: 80rpx;
	border-radius: 145rpx;
	border: 2rpx solid #e5e5e5;
	background-color: #f5f5f5;

	.input {
		flex: 1;
		padding: 20rpx;
		font-size: 28rpx;
	}

	.btn {
		display: flex;
		justify-content: center;
		align-items: center;
		margin-left: auto;
		width: 141rpx;
		height: 69rpx;
		font-size: 28rpx;
		color: #fff;
		border-radius: 68rpx;
		background-color: #007aff;
	}
}
</style>