yuezhilian-c/src/components/SearchBox/SearchBox.vue

<template>
	<view class='search-content'>
		<!-- 首页搜索 -->
		<view class="search-box" v-if="typeFlag == 'base'" @click="toPage">
			<view class="search-left">
				<text class="icon">&#xe710;</text>
				<input type="text" value="" placeholder="搜索商品名称/品牌/品类" disabled="false" />
			</view>
			<text class="search-btn">搜索</text>
		</view>
		<!-- 搜索页面搜索 -->
		<view class="search-box1" v-if="typeFlag == 'searchPage'">
			<view class="search-left1">
				<text class="icon1">&#xe710;</text>
				<input type="text" class="input-styl1" placeholder-class="placeholder" confirm-type="search" :value="searchContent" @input="changeInput"
					@confirm="inputSearch" placeholder="搜索商品名称" />
				<text class="icon1" v-if="iconShow == true" @click="deleteContent">&#xe70e;</text>
			</view>
			<text class="search-btn1" @click="clickCancel">取消</text>
		</view>

	</view>
</template>
<script lang='ts'>
	import {
		Component,
		Prop,
		Watch,
		Emit,
		Vue
	} from 'vue-property-decorator';
	@Component({})

	export default class SearchBox extends Vue {
		@Prop({
			default: "base"
		}) private typeFlag ? : string; //搜索框类型
		@Prop({
			default: ""
		}) private searchTitle ? : string; //搜索内容 父->子
		searchContent: string = ''; //搜索框内容
		iconShow: boolean = false; //搜索框删除icon

		// methods
		//@input修改input内容
		changeInput(e: any) {
			this.searchContent = e.detail.value;
		}
		//删除筛选内容
		deleteContent() {
			this.searchContent = '';
		}
		//跳转页面
		toPage() {
			this.$Router.push({
				path: '/packages/goods/search',
				query: {}
			});
		}


		// emit-----------------------
		@Emit('cancelEvent') //点击取消按钮
		//点击取消按钮
		clickCancel() {
			this.searchContent = '';
			this.$Router.back(1);
		}
		@Emit('inputSearch') //点击键盘上的搜索
		inputSearch() {
			if (this.searchContent == '') {
				// uni.showToast({
				// 	title: '请输入搜索内容',
				// 	icon: 'none'
				// });
				return "";
			} else {
				return this.searchContent;
			}
		}
		// watch-------------------
		@Watch('searchContent') //监听是否有搜索内容，展示删除icon
		changeIconShow() {
			this.iconShow = this.searchContent !== '';
		}
		@Watch('searchTitle') //监听父组件点击历史搜索记录，更新搜索title
		changeSearchContent() {
			if (this.searchTitle !== '') {
				this.searchContent = this.searchTitle || '';
			}
		}

	}
</script>

<style lang='scss' scoped>
	.search-content {
		font-size: vw(14);

		.search-box {
			@include flex-x();
			@include wh(348, 32);
			margin: 0 auto;
			background-color: #F6F6F6;
			border-radius: vw(8);

			.search-left {
				@include flex-x();

				.icon {
					margin: 0 vw(10);
					@include icon(14);
				}
			}

			.search-btn {
				padding-left: vw(12);
				margin-right: vw(13);
				border-left: 1px solid #E3E3E3;
				color: $btn-color;
				flex-shrink: 0;
			}
		}

		.search-box1 {
			@include flex-x();
			@include wh(348, 32);
			margin: 0 auto;

			.search-left1 {
				@include flex-x(flex-start);
				@include wh(293, 32);
				border-radius: vw(8);
				background-color: #F6F6F6;

				.icon1 {
					margin: 0 vw(10);
					@include icon(14);
				}

				.input-styl1 {
					width: 80%;
				}
				.placeholder{
					color: #999;
				}
			}

			.search-btn1 {
				padding-left: vw(12);
				margin-right: vw(13);
				color: $btn-color;
			}
		}
	}
</style>