caimei-applets-weisha/components/cm-module/search/fuzzySearch.vue

<template>
	<view>
		<view class="search" :style="{ position: fixed ? 'fixed' : 'relative' }">
			<view class="search-box">
				<text class="iconfont icon-sousuo"></text>
				<input type="text" :placeholder="placeholder" v-model="text" @input="onInputHandle" @focus="inputFoucsHandle" @blur="inputBlurHandle"/>
			</view>
			<view class="fuzzy" v-if="showMask">
				<view
					class="fuzzy-item"
					v-for="(item, index) in list"
					:key="index"
					@click="chickHandle(item)"
				>
					{{ item }}
				</view>
			</view>
		</view>
		<view class="mask" v-show="showMask"></view>
	</view>
</template>

<script>
export default {
	props: {
		placeholder: {
			type: String,
			default: '请输入搜索内容'
		},
		list: {
			type: Array
		},
		fixed: {
			type: Boolean,
			default: false
		}
	},
	data() {
		return {
			showMask:false,
			text:''
		}
	},
	methods: {
		chickHandle(e) {
			this.$emit('fuzzyClick', e)
		},
		// 文本框获取焦点
		inputFoucsHandle(){
			this.showMask = true
		},
		// 文本框失去焦点
		inputBlurHandle(){
			this.showMask = false
		},
		// 文本框输入事件
		onInputHandle(){
			this.$emit('input',this.text)
		}
	}
}
</script>

<style lang="scss">
	// 自定义动画
	@keyframes fadeIn {
		from{
			opacity: 0;
		}
		to{
			opacity: 1;
		}
	}
.mask{
	width: 100vh;
	height: 100vh;
	position: fixed;
	background-color: rgba(0,0,0,.4);
	top: 0;
	left: 0;
	z-index: 666;
	animation: fadeIn ease-in .2s;
}
.search {
	position: relative;
	top: 0;
	padding: 20rpx 24rpx;
	width: 100%;
	box-sizing: border-box;
	background-color: #fff;
	z-index: 999;
	.search-box {
		display: flex;
		justify-content: flex-start;
		align-items: center;
		height: 60rpx;
		padding-left: 10rpx;
		background-color: #f1f1f1;
		box-sizing: border-box;
		border-radius: 30rpx;
		position: relative;
		z-index: 999;
		.iconfont {
			width: 60rpx;
			height: 60rpx;
			margin-right: 8rpx;
			text-align: center;
			line-height: 60rpx;
		}
		input {
			font-size: 26rpx;
		}
	}
	.fuzzy {
		padding: 10rpx 0;
		padding-left: 76rpx;
		animation:  fadeIn ease-in .2s;
		.fuzzy-item {
			font-size: 26rpx;
			color: #444;
			line-height: 60rpx;
		}
	}
}
</style>