siyu_app/components/wbpNavBar/wbpNavBarSearch.vue

<template>
	<view class="u-f-ajc u-f-jsb wbpNavBar" :style="{ backgroundColor: bgColor }">
		<view class="wbp-searchInput">
			<input type="text" placeholder="请输入搜索内容" v-model="keyword" @confirm="rightTap" />
			<image src="../../static/login/del30.png" v-if="keyword.length > 0" @click="deleteTap"></image>
		</view>
		<view class="wbp-right-text" :style="{ color: cancelColor }" @click="rightTap" v-if="!searchState">
			取消
		</view>
		<view class="wbp-right-text" :style="{ color: cancelColor }" @click="rightTap" v-if="searchState">
			搜索
		</view>
	</view>
</template>

<script>
	import util from "@/common/util.js"
	export default {
		props: {
			title: {
				type: String,
				default: "标题"
			},
			bgColor: {
				type: String,
				default: "#ffffff"
			},
			cancelColor: {
				type: String,
				default: "#0A0204"
			},
		},
		data() {
			return {
				keyword: '',
				searchState: false
			};
		},
		watch: {
			keyword(newVal) {
				console.log(newVal)
				if (newVal) {
					this.$emit("input", newVal);
				}
				this.searchState = newVal.length
			}
		},
		methods: {
			rightTap(e) {
				if (!util.isEmpty(e.target.value)) {
					this.searchState = true
					this.keyword = e.target.value
				}
				if (this.searchState) {
					this.$emit("search", this.keyword)
				} else {
					this.$emit("cancel")
				}
			},
			deleteTap() {
				this.keyword = '';
				this.$emit('delete');
			}
		}
	}
</script>

<style lang="scss" scoped>

	.wbpNavBar {
		/* #ifdef MP-WEIXIN */
		width: 550rpx;
		margin-right: 200rpx;
		/* #endif */
		background-color: #ff0000;
		/* #ifdef APP-PLUS */
		width: 750rpx;
		/* #endif */
		height: 88rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;

		.wbp-back-content {
			height: 100%;
			display: flex;
			justify-content: flex-end;
			align-items: center;

			.wbp-back {
				width: 40rpx;
				height: 40rpx;
				margin-left: 30rpx;
			}
		}

		.wbp-searchInput {
			background-color: #efefef;
			width: 600rpx;
			height: 30px;
			border-radius: 15px;
			margin: 30rpx;

			display: flex;
			flex-direction: row;
			align-items: center;

			input {
				background-color: #efefef;
				width: 100%;
				height: 30px;
				border-radius: 15px;
				line-height: 30rpx;
				text-indent: 30rpx;
			}

			image {
				width: 30rpx;
				height: 30rpx;
				margin-left: -45rpx;
			}
		}

		.wbp-title {
			font-size: 36rpx;
			color: #0a0204;
		}

		.wbp-right-text {
			text-align: center;
			width: 90rpx;
			height: 40rpx;
			margin-right: 30rpx;
			color: #232323;
		}
	}
</style>