first

components/my-components/my-search.vue

@@ -0,0 +1,59 @@
+<template>
+	<view class="search-box" :class="{'shape-circle':shape==='circle'}">
+		<view class="search-btn u-flex u-flex-1">
+			<image src="@/static/iconImg/icon-search.svg" class="icon-search" />
+			<view class="u-flex-1 u-p-l-24"><input v-model="search.keyword" @confirm="confirm" type="text"
+					placeholder-style="font-size:28rpx;" :placeholder="placeholder" /></view>
+
+		</view>
+		<view @tap.stop="clear" v-if="search.keyword">
+			<uni-icons type="clear" size="16" color="#999"></uni-icons>
+		</view>
+	</view>
+</template>
+
+<script setup>
+	import {
+		reactive
+	} from 'vue';
+	const props = defineProps({
+		placeholder: {
+			type:String,
+			default:'搜索'
+		},
+		shape:{
+			type:String,
+			default:''
+		}
+	})
+	
+	const search = reactive({
+		keyword: "",
+	})
+
+	function clear() {
+		search.keyword = ''
+	}
+	const emits = defineEmits(['confirm'])
+
+	function confirm(e) {
+		emits('confirm', search.keyword)
+	}
+</script>
+
+<style lang="scss">
+	.search-box {
+		background: #F9F9F9;
+		padding: 10rpx 30rpx 10rpx 30rpx;
+		border-radius: 12rpx;
+		display: flex;
+		box-sizing: border-box;
+		&.shape-circle{
+			border-radius: 100px;
+		}
+		.icon-search {
+			width: 26rpx;
+			height: 26rpx;
+		}
+	}
+</style>