feiniao-youwei-uniapp/components/v-search/v-search.vue

<template>
	<view class="v-search">
		<view class="search-wrap">
			<up-search placeholder="搜索品种" v-model="searchVal" @clear="clear" @custom="searchFun" @search="searchFun"></up-search>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from "vue"
	
	const searchVal = ref('')
	const searchFun = (e)=>{
		emit('searchCallback',e)
	}
	const clear = ()=>{
		emit('clearCallback')
	}
	
	const emit = defineEmits(['searchCallback','clearCallback'])
</script>

<style lang="scss" scoped>
	.v-search {
		display: flex;
		align-items: center;
		width: 100%;
		border: 2rpx solid #FFD95E;
		border-radius: 40rpx;

		.search-wrap {
			flex: 1;

			::v-deep {
				.u-search {
					.u-search__content {
						background-color: transparent !important;

						.u-search__content__input {
							background-color: transparent !important;

						}
					}

					.u-search__action {
						text-align: center;
						line-height: 52rpx;
						border-radius: 40rpx;
						font-size: 28rpx;
						background-color: #FFD95E;
						margin: 6rpx 8rpx;
						width: 112rpx;
						height: 52rpx;
					}
				}
			}
		}

		.search-btn {
			text-align: center;
			line-height: 52rpx;
			border-radius: 40rpx;
			font-size: 28rpx;
			background-color: #FFD95E;
			margin: 6rpx 8rpx;
			width: 112rpx;
			height: 52rpx;
		}
	}
</style>