caimei-applets-store/components/views/cm-search/cm-search.vue

<template>
	<view class="cm-search">
		<view class="search-control" @click.stop="handleClick">
			<view class="search-input">
				<text class="search-icon iconfont icon-sousuo"></text>
				<input
					type="text"
					confirm-type="search"
					:placeholder="placeholder"
					v-model="inputValue"
					:focus="false"
					@focus="$emit('focus')"
					@confirm="handleSearch(inputValue)"
				/>
				<text v-if="clearable && inputValue" class="clearable iconfont icon-quxiao" @click="clearValue"></text>
			</view>
			<view class="search-btn" @click="handleSearch(inputValue)">搜索</view>
		</view>

		<template v-if="keywordVisible && keywordList.length > 0">
			<view class="hot-keyword">
				<view class="title">
					<text>搜索历史</text>
					<text class="clear iconfont icon-shanchu" @click="$emit('remove')"></text>
				</view>
				<view class="keyword-list">
					<view
						class="keyword"
						@click="handleSearch(keyword)"
						v-for="(keyword, index) in keywordList"
						:key="index"
						v-text="keyword"
					></view>
				</view>
			</view>
			<view class="mask"></view>
		</template>
	</view>
</template>

<script>
export default {
	name: 'cm-search',
	model: {
		prop: 'value',
		event: 'input'
	},
	props: {
		value: {
			typs: String,
			default: ''
		},
		// 占位字符
		placeholder: {
			type: String,
			default: '请输入搜索关键字'
		},
		clearable: {
			type: Boolean,
			default: true
		},

		disabled: {
			type: Boolean,
			default: false
		},

		keywordList: {
			type: Array,
			default: () => []
		},

		keywordVisible: {
			type: Boolean,
			default: true
		}
	},
	watch: {
		inputValue(nVal) {
			this.$emit('input', nVal)
		}
	},
	data() {
		return {
			inputValue: ''
		}
	},
	created() {
		this.inputValue = this.value
	},
	methods: {
		clearValue() {
			this.inputValue = ''
			this.$emit('clear')
		},
		handleClick() {
			if (!this.disabled) return
			this.$emit('goSearch')
		},
		handleSearch(keyword) {
			if (this.disabled) return
			this.inputValue = keyword
			this.$emit('search')
		}
	}
}
</script>

<style lang="scss" scoped>
.cm-search {
	position: relative;

	.hot-keyword {
		position: relative;
		z-index: 999;
		width: 100%;
		background: #fff;

		box-sizing: border-box;
		padding: 0 24rpx 32rpx;

		.title {
			position: relative;
			font-size: 26rpx;
			padding: 24rpx 0;
			color: #333;
			font-weight: bold;

			.clear {
				position: absolute;
				font-weight: normal;
				right: 0;
				top: 50%;
				transform: translateY(-50%);
			}
		}

		.keyword {
			display: inline-block;
			margin-right: 18rpx;
			font-size: 24rpx;
			line-height: 40rpx;
			padding: 0 16rpx;
			border-radius: 20rpx;
			background: #eee;
			color: #333;
		}
	}

	.mask {
		position: fixed;
		width: 100vw;
		height: 100vh;
		top: 0;
		left: 0;
		z-index: 998;
		background: #f7f7f7;
	}

	.search-control {
		position: relative;
		z-index: 999;

		border-bottom: 1rpx solid #f7f7f7;

		display: flex;
		justify-content: space-between;
		align-items: center;
		height: 90rpx;
		background: #fff;

		box-sizing: border-box;

		padding: 0 24rpx;

		.search-input {
			flex: 1;
			height: 60rpx;
			line-height: 60rpx;
			display: flex;
			align-items: center;
			position: relative;
			padding-left: 74rpx;
			font-size: 26rpx;
			border-radius: 30rpx;
			background: #f7f7f7;

			input {
				width: 100%;
			}

			.search-icon,
			.clearable {
				position: absolute;
				top: 50%;
				transform: translateY(-50%);
				z-index: 9;
			}

			.search-icon {
				left: 24rpx;
			}

			.clearable {
				right: 24rpx;
				color: #ccc;
			}
		}

		.search-btn {
			text-align: center;
			width: 60rpx;
			height: 60rpx;
			line-height: 60rpx;
			margin-left: 16rpx;
			font-size: 26rpx;
		}
	}
}
</style>