uni-app 给input框添加点击清空按钮

谁借莪１个温暖的怀抱￠ 2022-12-22 13:25 308阅读 0赞

用value绑定输入的值，要通过@input事件监听，这个方法只要input值发生改变就会调用，v-if控制‘清空’这个图标，没值就不显示，我悟了！！！

## 效果图 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2thX3hpbmds_size_16_color_FFFFFF_t_70_pic_center]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2thX3hpbmds_size_16_color_FFFFFF_t_70_pic_center 1]

<view slot="default" class="search_box">
    	<text class="icon_search"></text>
    	<input style="width: 280px;" :value="searchName" class="prompt" placeholder="请输入员工姓名" @input="theBlur"></input>
    	<text v-if="searchName" class="icon_close" @click="close"></text>
    </view>
    <sript>
    //methods
    close:function(){ 
    	this.searchName = ''
    	this.queryByInput()
    },
    theBlur(e){ 
    	console.log(e.target.value)
    	this.searchName = e.target.value
    	this.queryByInput()//查询列表调用的方法
    }
    <sript>
    <style>
    	.search_box { 
    		width: 400upx;
    		height: 64upx;
    		background-color: #f5f5f5;
    		border-radius: 32upx;
    		display: flex;
    		align-items: center;
    		padding: 0upx 40upx;
    		.prompt { 
    			font-size: 28upx;
    			color: #cccccc;
    		}
    	}
    	
    	.icon_search { 
    		background-image: url(../../static/nav/map_ic_search.png);
    		background-position: center center;
    		background-repeat: no-repeat;
    		background-size: cover;
    		width: 32upx;
    		height: 28upx;
    		margin-right: 20upx;
    	}
    	
    	.icon_close { 
    		background-image: url(../../static/nav/del.png);
    		background-position: center center;
    		background-repeat: no-repeat;
    		background-size: cover;
    		width: 32upx;
    		height: 28upx;
    		margin-right: 10upx;
    	}
    </style>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2thX3hpbmds_size_16_color_FFFFFF_t_70_pic_center]: /images/20221120/00697a30c8e24bea82abfc08dfa7afbc.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2thX3hpbmds_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221120/d77cec5c8696449ba4d5ee81e985cc57.png