epc/components/searchBox/searchBox.vue

<template>
	<view>
		<!-- 搜索 -->
		<view class="searchBox">
			<image src="../../static/img/icon_search.png" class="searchImg"></image>
			<input type="text" class="searchInput" :placeholder='placeholder' v-model="inputValue"
				@confirm="search" />
			<image src="../../static/img/icon_close.png" class="searchClose" v-if="inputValue!=''"
				@click="clear"></image>
		</view>

	</view>
</template>

<script>
	export default {
		name: "searchBox",
		props: {
			placeholder: {
				type: String,
				default: '请输入搜索内容'
			},
			
		},
		data() {
			return {
				inputValue: '',
			};
		},
		methods:{
			search(){
				if (!this.inputValue) return;
				 //console.log(this.inputValue);
				this.$emit('search',this.inputValue);
				
			},
			clear(){
				this.inputValue = ''
				this.$emit('search','');
			},
		}
	}
</script>

<style>
	.searchBox {
		height: 72rpx;
		margin: 24rpx;
		background-color: #F4F5F7;
		border-radius: 36rpx;
		display: flex;
		position: relative;
	}

	.searchImg {
		margin-top: 20rpx;
		margin-left: 20rpx;
		width: 32rpx;
		height: 32rpx;
	}

	.searchInput {
		height: 72rpx;
		font-size: 28rpx;
		padding-left: 16rpx;
		width: 78%;
	}

	.searchClose {
		position: absolute;
		width: 36rpx;
		height: 36rpx;
		right: 36rpx;
		top: 20rpx;

	}
</style>