uniapp实现一个搜索框

╰半橙微兮° 2022-09-09 06:46 393阅读 0赞

<template>
    	<view class="sousuo" :style="{'margin-left': isShowFocus?'5%':'','width':width}">
    		<view class="sousuo_ico"><text class="iconfont icon-sousuo"></text></view>
    		<view class="sousuo_input"><input type="text" @focus="onFocusInput" @blur="onBlurInput"  placeholder-class="sousuo_placeholder"
    			v-model="inpuval"	:placeholder="placeholder" /></view>
    	    <view class="sousuo_cances" @click="inputCances" v-if="isShowFocus">取消</view>
    	</view>
    </template>
    
    <script>
    	export default { 
    		name:"searInput",
    		props:{ 
    			placeholder:{ 
    				type:String,
    				default:"请输入"
    			}
    		},
    		data() { 
    			return { 
    				isShowFocus:false,
    				inpuval:'',
    				width:"90%"
    			};
    		},
    		methods:{ 
    			onFocusInput: function(event) { 
    				//console.log('输入框聚焦时触发:',event)
    				   // this.inputValue = event.target.value
    				   this.isShowFocus=true;
    				   this.width="80%";
    				   this.$emit("focus")
    			   },
    			onBlurInput:function(event){ 
    				//console.log("输入框失去焦点时触发:",event); 
    				this.$emit("blur")
    				 
    			},
    			inputCances:function(){ 
    				this.isShowFocus=false;
    				this.inpuval='';
    				this.width="90%"
    				this.$emit("cancel");
    			}
    		}
    		
    	}
    </script>
    
    <style lang="scss">
    .sousuo { 
    		display: flex; 
    		align-content: center;
    		align-items: center;
    		background-color: #E5E5E5;
    		padding: 5px 0;
    		margin-left: 5%;
    		margin-top: 10px;
    		margin-bottom: 10px; 
    		border-radius: 5px;
    		.sousuo_ico { 
    			width: 10%;
    			text-align: center;
    		}
    
    		.sousuo_input { 
    			width: 90%;
    
    			input { 
    				font-size: 10px;
    				letter-spacing: 1px;
    			}
    
    			.sousuo_placeholder { 
    				font-size: 10px;
    				color: #7E7E7E;
    			}
    		}
    		.sousuo_cances{ 
    			position: absolute;
    			width: 93%;
    			text-align: right;
    			font-size: 15px;
    			color: #666;
    			 
    		}
    	}
    
    </style>

![在这里插入图片描述][d115857a9e3d48da83ddd9c66f5f2619.png]

[d115857a9e3d48da83ddd9c66f5f2619.png]: /images/20220829/7cf754c9303f475a9255d0262f245c38.png