emis-sapp/components/tpx-search/tpx-search.vue

<template>
	<view class="sch-cont">
		<view>
			<u-input shape="circle" :placeholder="placeholder" v-model="keyword" :custom-style="`background-color: ${bgColor};height: ${height}rpx;`" 
				 @focus="handleSwitchFouce()" @blur="handleSwitchFouce()"  @confirm="triggerChange()" @change="handleChange()">
				<!-- <template v-slot:prefix>
					<u-icon name="search" size="32"></u-icon>
				</template> -->
				<template v-slot:suffix>
					<u-row>
						<view v-if="focused && keyword.length > 0" style="0 20rpx 0 0">
							<u-icon @click="handleClear()" color="#999"  name="close-circle-fill" size="36"></u-icon>
						</view>
						<view>
							<u-icon @click="triggerChange()"  name="search" size="40" margin="0 0 0 20rpx"></u-icon>
						</view>
					</u-row>
					<!-- <u-button type="primary" shape="circle"  custom-style="margin:0;height: 50rpx;">搜索</u-button> -->
				</template>
			</u-input>
		</view>
		
	</view>
</template>

<script>
	export default {
		props: {
			timelyTrigger: {
				default () {
					return true
				}
			},
			placeholder: {
				default () {
					return ''
				}
			},
			bgColor: {
				default () {
					return '#f2f2f2'
				}
			},
			height: {
				default () {
					return 50
				}
			},
			value: {
				default () {
					return ''
				}
			},
			
		},
		data() {
			return {
				focused: false,
				keyword: this.value
			}
		},
		created() {

		},
		onHide() {

		},
		destroyed() {},
		
		methods: {
			handleSwitchFouce() {
				setTimeout(()=> {
					this.focused = !this.focused
				}, 100)
			},
			handleChange() {
				if(this.timelyTrigger) {
					this.triggerChange()
				}
			},
			handleClear( ) {
				debugger
				this.keyword = ''
				this.triggerChange()
			},
			triggerChange() {
				let val = this.keyword
				this.$emit('change', val)
				this.$emit('update:value', val) 
			}
		}
	}
</script>

<style scoped lang="scss">
	.sch-cont{
		position: relative;
	}
</style>