uniapp 搜索框_uniapp用什么ui框架好

<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>

今天的文章uniapp 搜索框_uniapp用什么ui框架好分享到此就结束了，感谢您的阅读。