front-end/mobile-code/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]"></i>
			</div>
			<div class="input-wrap">
				<input type="text" v-model="search" @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: '搜索'
		}
	},
	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: 10px;
			.icon-wrap {
				margin-left: 20px;
				width: 40px;
				.iconfont {
					color: #ccc;
				}
			}
			.input-wrap {
				width: calc(100% - 90px);
				margin-left: 14px;
				input {
					font-size: 26px;
					text-align: left;
				}
				.placeholder {
					color: #ccc;
				}
			}
        }
        // 按钮
        .search-btn {
            height: 100%;
            padding: 0 20px;
            flex-shrink: 0;
            margin-left: 20px;
            background-color: inherit;
        }
	}
</style>