在uniapp封装搜索组件

项目中很多时候都会用到共同的组件部分,当遇到这些公共的部分的时候,首先想到的就是封装.接下来,就聊一聊组件的封装,在这里以**搜索框**为例.基本上每个项目都会用到这个部分
实现效果如下:

搭建结构

从实现的效果来看,并没有那么多新知识,更多的话可能就是一些样式的实现:话不多说开始敲代码.首先我们在项目中先搭建好结构

搜索框的简单搭建

代码如下:

<template lang="wxml">
	<view class="history">
		<view class="search">
			<input type="text">
		</view>
	</view>
</template>

<script>
export default {}
</script>

<style scoped lang='less'>
.history{
	.search {
	box-sizing: border-box;
	padding: 20rpx 16rpx;
	background-color: red;
	position: relative;

	 input {
		height: 60rpx;
		background-color: #fff;
	}

	}

}

接下来是一些js的逻辑:
通过input的focus事件,改变样式.在通过点击取消事件,取消增加的样式.效果如下:

新增css样式

.active{
   
		display: flex;
		background-color: #f4f4f4;
		input{
   
			flex: 1;
			margin-right: 50rpx;
		}
		.cancle{
   
			width: 120rpx;
			height: 60rpx;
			line-height: 60rpx;
			font-size: 30rpx;
			text-align: center;
			border: 1px solid #ccc;
			background-color: #fff;
			box-sizing: border-box;
		}
	}

html

<view class="history">
		<view class