微信小程序中使用input组件,点击上面的清空图标不生效问题
问题原因:在真机调试中,因为微信小程序中input组件的层级在聚焦时会最高,会覆盖清空图标,所以点击不生效,在pc开发者工具中是不存在问题的
解决方法:
1.设置 input 的 padding-right 大于图标的宽度。
2.使用uview-UI中的input组件,修改input组件的深度样式,不要试图将清空图标放在input组件的上面,图标使用 cover-view 和 cover-image 组件也不可以。
代码实现(方法1):
html:
<view class="content-brandSearch">
<input v-model="brandName" class="brandSearch-input" type="text"/>
<view view v-if="brandName" class="brandSearch-icon" @click="clear(0)">
<img src="@img/close.png" alt=""/>
</view>
</view>
css:
.content-brandSearch {
position: relative;
.brandSearch-input {
/******加这行代码,超过图标的宽度*********/
padding-right: rpx(35);
/**************************************/
width: rpx(351);
height: rpx(36);
background: #f6f7f9;
border-radius: rpx(24.5);
}
.brandSearch-icon {
width: rpx(15);
height: rpx(15);
position: absolute;
right: rpx(26);
top: rpx(26);
img {
width: 100%;
height: 100%;
}
}
}
js:
data() {
return {
brandName: "",
factoryName: "",
};
},
methods:{
//input上的x
clear(type) {
if (type == 0) {
this.brandName = "";
} else {
this.factoryName = "";
}
},
}