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;${true?'padding-right:120rpx;': ''}`" 
				font-size="28rpx" placeholder-style="font-size: 28rpx;"
				@focus="handleSwitchFouce()" @blur="handleSwitchFouce()"  @confirm="triggerChange()" @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 && keyword.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>
					<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>
				</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,
				keyword: this.value
			}
		},
		created() {

		},
		onHide() {

		},
		destroyed() {},
		
		methods: {
			handleSwitchFouce() {
				setTimeout(()=> {
					this.focused = !this.focused
				}, 100)
			},
			handleChange() {
				if(this.timelyTrigger) {
					this.triggerChange()
				}
			},
			handleClear( ) {
				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>