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"
				:bgColor="'transparent'"
				:actionStyle="actionStyle"
				:inputStyle="inputStyle"
			></up-search>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		computed
	} from "vue"
	
	const searchVal = ref('')
	
	// 通过 props 传递样式
	const actionStyle = computed(() => ({
		textAlign: 'center',
		lineHeight: '52rpx',
		borderRadius: '40rpx',
		fontSize: '28rpx',
		backgroundColor: '#FFD95E',
		margin: '6rpx 8rpx',
		width: '112rpx',
		height: '52rpx'
	}))
	
	const inputStyle = computed(() => ({
		backgroundColor: 'transparent'
	}))
	
	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;
		}

		.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>