mp_exhibitor_miniprog/components/common/u-search/index.vue

<template>
	<view class="u-search">
		<view class="u-search-input">
			<van-search :value="searchKeyword" :placeholder="placeholder" use-action-slot class="van-search"
				@change="query" @search="onClickSearch">
				<view class="u-search-text" slot="action" @tap="onClickSearch">搜索</view>
			</van-search>
		</view>
	</view>
</template>

<script>
	
	import VanSearch from '@/wxcomponents/vant/search/index'
	
	export default {
		options: {
			styleIsolation: 'shared'
		},
		components: {
			VanSearch
		},
		props: {
			value: String,
			placeholder: {
				type: String,
				default: ''
			}
		},
		computed: {},
		watch: {
			searchKeyword(val) {
				this.$emit('input', val)
			},
			value(val) {
				this.searchKeyword = this.value
			}
		},
		data() {
			return {
				searchKeyword: ''
			}
		},
		created() {
			this.searchKeyword = this.value
		},
		mounted() {},
		methods: {
			query(val) {
				this.searchKeyword = val
				this.$emit('input', this.searchKeyword)
				this.$emit('change', {
					detail: this.searchKeyword
				})
			},
			onClickSearch() {
				this.$emit('search')
			}
		}
	}
</script>
<style lang="scss">
	.u-search {
		.u-search-input {
			height: 64rpx;
			border-radius: 50rpx;
			background-color: #FFFFFF;
			box-shadow: 0 4rpx 4rpx 0 rgba(0, 0, 0, 0.15);
			border: 2rpx solid #D9D9D9;
			padding: 4rpx;
			overflow: hidden;

			.van-field__placeholder {
				font-size: $fontSize2;
			}

			.van-cell__left-icon-wrap {
				height: 50rpx;
			}

			.van-field__control {
				font-size: $fontSize2;
				height: 50rpx;
			}
		}

		.van-search {
			--search-padding: 0rpx;
			--search-input-height: 34rpx;
			--search-background-color: #FFFFFF;
			padding-right: 24rpx;
			font-size: $fontSize2;
		}

		.u-search-text {
			font-size: $fontSize2;
		}

		.van-search__action {
			color: #333333;
		}

		.van-icon {
			color: #D4D4D6;
		}

		.van-cell {
			padding: 2rpx 0rpx 2rpx !important;
		}
	}
</style>