RRDJ_APP/uniapp/components/fa-search/fa-search.vue

<template>
	<view class="search">
		<view class="content" :style="{ 'border-radius': radius + 'px' }">
			<view class="content-box" :class="{ center: mode === 2 }" @click.self="getFocus">
				<u-icon name="search" color="#808080" size="30"></u-icon>
				<input
					class="input u-m-l-10"
					:class="{ center: !active && mode === 2 }"
					:focus="isFocus"
					:placeholder="placeholder"
					v-model="inputVal"
					@focus="focus"
					@blur="blur"
					@confirm="search"
				/>
				<u-icon v-if="isDelShow" @click="clear" name="close-circle-fill" color="#b4b4b4" size="35"></u-icon>				
				
			</view>
		</view>
	</view>
</template>

<script>
export default {
	name:'fa-search',
	props: {
		mode: {
			type: Number,
			default: 1
		},
		radius: {
			type: String,
			default: '60'
		},
		placeholder: {
			type: String,
			default: '请输入关键词搜索'
		},
		custom:{
			type:Boolean,
			default:false
		}
	},
	data() {
		return {
			active: false,
			inputVal: '',
			isDelShow: false,
			isFocus: false
		};
	},
	watch: {
		inputVal(newVal) {
			if (newVal) {				
				this.isDelShow = true;
			} else {				
				this.isDelShow = false;
			}
		}
	},
	methods: {
		focus() {
			this.active = true;
		},
		blur() {
			this.isFocus = false;
			if (!this.inputVal) {
				this.active = false;
			}
		},
		clear() {
			this.inputVal = '';
			this.active = false;			
		},
		getFocus() {
			this.isFocus = true;
		},
		search(e) {
			if(this.custom){
				this.$emit('change',e.detail.value);
				return;
			}
			this.$Router.push({
				path: '/pages/search/search',
				query: { keyword: e.detail.value }
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.search {
	display: flex;
	width: 100%;
	box-sizing: border-box;
	font-size: $uni-font-size-base;
	background: #fff;
	.content {
		display: flex;
		align-items: center;
		width: 100%;
		height: 70rpx;
		background-color: #f2f2f2;
		overflow: hidden;
		transition: all 0.2s linear;
		border-radius: 30px;
		padding: 0 30rpx;
		.content-box {
			width: 100%;
			display: flex;
			align-items: center;
			&.center {
				justify-content: center;
			}
			.input {
				width: 100%;
				max-width: 100%;
				line-height: 60rpx;
				font-size: 30rpx;
				height: 60rpx;
				background-color: #f2f2f2;
				transition: all 0.2s linear;
				&.center {
					width: 250rpx;
				}
				&.sub {
					width: auto;
					color: grey;
				}
			}
		}
	}
}
</style>