pingpu_H5/components/ui-search/ui-search.vue

<template>
	<!-- 全局搜索框封装 -->
	<view class="ui-search">
		<uni-search-bar @confirm="confirmSearch" bgColor="#f3f5f9" cancelButton="none" v-model="searchValue"
		  @cancel="cancelSearch" @clear="cancelSearch"
			:placeholder="placeholder">
			<template v-slot:searchIcon>
				<text></text>
			</template>
		</uni-search-bar>
	</view>
</template>

<script>
	/**
	 * 封装搜索组件
	 * @description 全局搜索组件样式行为统一封装
	 */
	export default {
		name: 'ui-search',
		data() {
			return {
				searchValue: '', // 搜索内容
			}
		},
		props: {
			placeholder: {
				type: String,
				default: '请输入'
			}
		},
		methods: {
			// 提交搜索
			confirmSearch(e) {
				console.log(e);
				this.$emit("confirm", e.value)
			},
			// 清空搜索信息
			cancelSearch(e) {
				this.$emit("confirm", '')
			},
		}
	}
</script>

<style lang="scss" scoped>
	.ui-search .uni-searchbar {
		padding: 12rpx 24rpx;
		background-color: $bg-color;
		

		::v-deep .uni-searchbar__box {
			height: 64rpx;
			border-radius: 36rpx !important;
			justify-content: flex-start;
		}
		
	}
</style>