小程序input搜索框的做法带清除按钮(有效避开事件穿透)

// 使用这个结构
<view class='headerd'>
<view class='order_search'>
<view class='search_box'>
<icon type='search' size='16'></icon>
<van-icon name="clear" color='#999' style='position:absolute;top:8rpx;right:18rpx;z-index:999' bindtap="clearText" />
<input type='text' style="width:563rpx;" value="{{search_text}}" placeholder='请输入搜索关键词' bindconfirm='searchFun'></input>
</view>
</view>
</view>

// 使用这个样式 
.headerd .order_search .search_box{
background-color: #f7f8fa;
display: flex;
padding: 6rpx 20rpx;
line-height: 48rpx;
align-items: center;
flex: 1;
position:relative;
}
.headerd .order_search .search_box icon{
height: 48rpx;
line-height: 48rpx;
display: flex;
align-items: center;
margin-right: 10rpx;
}
.headerd .order_search .search_box input{
width: 100%;
}

猜你喜欢

转载自www.cnblogs.com/xiaoxiaoxun/p/12156649.html
今日推荐