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 v-show="showClosable" class="iconfont icon-guanbi" @click="clearInput"></view>
			</view>
			<view class="search-btn" @click="searchHandle"> 搜索 </view>
		</view>
		<view class="mask" v-show="showMask"></view>
	</view>
</template>

<script>
export default {
	props: {
		placeholder: {
			type: String,
			default: '请输入搜索内容'
		},
		fixed: {
			type: Boolean,
			default: false
		}
	},
	data() {
		return {
			showMask: false,
			text:''
		}
	},
	computed:{
		showClosable(){
			return this.text.trim().length>0
		}
	},
	methods: {
		chickHandle(e) {
			this.$emit('fuzzyClick', e)
		},
		// 文本框获取焦点
		inputFoucsHandle() {
			this.showMask = true
		},
		// 文本框失去焦点
		inputBlurHandle() {
			this.showMask = false
		},
		// 文本框输入事件
		onInputHandle() {
			this.$emit('input', this.text)
		},
		// 搜索按钮点击事件
		searchHandle(){
			this.$emit('search',this.text)
		},
		clearInput(){
			this.text = ''
			this.$emit('clear')
		}
	}
}
</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, 0.4);
	top: 0;
	left: 0;
	z-index: 666;
	animation: fadeIn ease-in 0.2s;
}
.search {
	display: flex;
	justify-content: space-between;
	align-items: center;
	position: relative;
	top: 0;
	padding: 20rpx 24rpx;
	width: 100%;
	box-sizing: border-box;
	background-color: #fff;
	z-index: 999;
	.search-btn{
		width: 80rpx;
		font-size: 28rpx;
		margin-left: 10rpx;
		text-align: right;
	}
	.search-box {
		display: flex;
		flex: 1;
		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;
		}
		.iconfont-guanbi{
			position: absolute;
			top: 0;
			right: 0;
			color: #eee;
		}
		input {
			width: 90%;
			font-size: 26rpx;
		}
	}
	.fuzzy {
		padding: 10rpx 0;
		padding-left: 76rpx;
		animation: fadeIn ease-in 0.2s;
		.fuzzy-item {
			font-size: 26rpx;
			color: #444;
			line-height: 60rpx;
		}
	}
}
</style>