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

<template>
	<view class="sch-cont">
		<view>
			<u-input shape="circle" :placeholder="placeholder" :modelValue="value" :custom-style="`background-color: ${bgColor};height: ${height}rpx;${true?'padding-right:120rpx;': ''}`" 
				font-size="28rpx" placeholder-style="font-size: 28rpx;"
				@focus="handleSwitchFouce" @blur="handleSwitchFouce" @change="handleChange">
			</u-input>
			<u-row justify="end" custom-style="position: absolute;width: 120rpx;top: 0;bottom: 0;right: 20rpx;">
				<u-row justify="end" customStyle="height: 100%;width:100%;">
					<u-row v-if="focused && value.length > 0"  @click="handleClear()" justify="end" style="0 20rpx 0 0;height: 100%;flex: 1;">
						<u-icon color="#999"  name="close-circle-fill" size="36"></u-icon>
					</u-row>
					<slot name="rightIcon">
						<u-row  @click="triggerChange()" justify="end" style="height: 100%;flex: 1;">
							<u-icon name="search" size="40" margin="0 0 0 20rpx"></u-icon>
						</u-row>
					</slot>
				</u-row>
			</u-row>
		</view>
		
	</view>
</template>

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

		},
		onHide() {

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

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