front-end/mallApp/src/components/module/app-search.vue

<template>
	<div class="app-search-module" :style="{height: height + 'rpx'}">
		<div class="map-search" :style="{backgroundColor: backColor}">
			<div class="icon-wrap" v-if="isIcon">
				<i class="iconfont" :class="[icon]" style="font-size:38upx;"></i>
			</div>
			<div class="input-wrap">
				<input type="text" ref="searchInput" v-model="search" :focus="focus" @input="inputFn" :style="{fontSize: fontSize + 'rpx'}" :placeholder="placeholder" placeholder-class="placeholder" />
			</div>
		</div>
		<block v-if="isBtn">
			<button v-if="isTextBtn" class="search-btn" :style="{fontSize: fontSize + 'rpx'}" @click="searchFn">{{ btnText }}</button>
			<button v-else class="search-btn admin-button-com middle blue" :style="{fontSize: fontSize + 'rpx'}" @click="searchFn">{{ btnText }}</button>
		</block>
	</div>
</template>

<script>
	export default {
		name: 'app-search-module',
		props: {
			// 搜索组件的高度
			height: {
				type: Number,
				default: 66
			},
			placeholder: {
				type: String,
				default: '请输入'
			},
			// size字体大小
			fontSize: {
				type: Number,
				default: 26
			},
			// 是否有icon
			isIcon: {
				type: Boolean,
				default: true
			},
			// 显示的icon
			icon: {
				type: String,
				default: 'iconsearch'
			},
			// 背景色
			backColor: {
				type: String,
				default: '#F0F2F6'
			},
			// 是否需要按钮
			isBtn: {
				type: Boolean,
				default: false
			},
			// 是否是文字按钮
			isTextBtn: {
				type: Boolean,
				default: true
			},
			// 按钮文字
			btnText: {
				type: String,
				default: '搜索'
			},
			// 是否自动聚焦
			focus: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {
				search: ''
			}
		},
		methods: {
			searchFn() {
				this.$emit('search', this.search)
			},
			inputFn(e) {
				// console.log('sdfa', e)
				setTimeout(() => {
					this.$emit('input', this.search)
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.app-search-module {
		width: 100%;
		@include disFlex(center, space-between);
		.map-search {
			@include disFlex(center, flex-start);
			width: 100%;
			height: 100%;
			border-radius: 10upx;
			.icon-wrap {
				margin-left: 20upx;
				width: 40upx;
				.iconfont {
					color: #ccc;
				}
			}
			.input-wrap {
				width: calc(100% - 90upx);
				margin-left: 14upx;
				input {
					font-size: 26upx;
					text-align: left;
				}
				.placeholder {
					color: #ccc;
				}
			}
		}
		// 按钮
		.search-btn {
			height: 100%;
			padding: 0 20upx;
			flex-shrink: 0;
			margin-left: 20upx;
			background-color: inherit;
		}
	}
</style>