bc_wx_applet/components/top-search/top-search.vue

<template>
	<view class="search margin-lr margin-tb-sm dflex-b padding-lr-sm" v-if="isSearch">
		<u--input
		    placeholder="请输入校服名称快速搜索"
		    border="none"
			clearable
		    v-model="value"
		    @change="change"
		  ></u--input>
		<u-icon name="search" color="#000" size="28"></u-icon>
	</view>
	<view class="search margin-lr margin-tb-sm dflex-b padding-lr-sm" v-else @click="clickHandle">
		<view class="search-text">请输入校服名称快速搜索</view>
		<u-icon name="search" color="#000" size="28"></u-icon>
	</view>
</template>

<script>
	export default {
		name:"top-search",
		props:{
			isSearch:{
				type:Boolean,
				default:true
			}
		},
		data() {
			return {
				value:''
			};
		},
		methods:{
			change(v) {
				this.$emit('onChange',v)
			},
			clickHandle() {
				this.$emit('searchClick')
			}
		}
	}
</script>

<style lang="scss">
.search{
	width: calc(100% - 60rpx);
	box-sizing: border-box;
	height: 100rpx;
	border:2px solid #000;
	border-radius: 50rpx;
	.search-text{
		font-size: 15px;
		color: #c3c3c3;
	}
}
</style>