eam-uniapp/components/search/index.vue

<template>
	<view class="content">
		<view class="screen-input">
				<u-search 
					v-model='keyWord'
					:show-action='false'  
					:bg-color="searchData.bgBolor ||'white'"
					:border-color="searchData.borderColor ||'#E4E4E4'"
					:shape="searchData.shape ||'square'"
					:height="searchData.height || 80"
					:placeholder="searchData.placeholder ||'请输入设备名称'" 
					:clearabled="true"
					@search='search'
					>
				</u-search>
		</view>
		<view class="screen-btn" @click="screen" v-if="isShowScreen">
			<image src="../../static/icon/screen.png" mode="widthFix"></image>
			<view>筛选</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			searchData:{
				type: Object,
				default:()=>{return {}},
				require:false
			},
			isShowScreen: {
				type: Boolean,
				default:()=>{return true},
				require:false
			},
		},
		data() {
			return {
				keyWord: '',
			}
		},
		methods: {
			// 搜索
			search() {
				this.$emit('search', this.keyWord)
			},
			// 筛选
			screen() {
				this.$emit('screen')
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		padding: 20rpx;
		display: flex;
		align-items: center;
		background: white;

		.screen-input {
			flex: 1;
			width: 0px;
		}

		.screen-btn {
			display: flex;
			align-items: center;
			margin-left:20rpx;

			image {
				width: 30rpx;
				margin-right: 6rpx;
			}
		}
	}

</style>