hht-tongbo-two/components/SearchBox.vue

<template>
	<view class="zd-row scan_wraper">
		<input 
		type="text" 
		class="zd-col-24 search_input" 
		confirm-type="go"
		:value="value"
		:focus="focusState"
		@focus="handleFocus"
		@blur="handleBlur"
		@confirm="handleSend">
		<uni-icons v-show="value.length" class="mgr20" type="clear" size="24" color="#666" @tap="toDel"></uni-icons>
		<uni-icons type="scan" size="22" :color="focusState ? '#D7592F' : '#666'" @tap="focusState=true"></uni-icons>
	</view>
</template>

<script>
	import permision from "@/utils/permission.js"
	export default {
		data() {
			return {
				focusState: false
			};
		},
		model: {
			prop: 'value',
			event: 'input'
		},
		props: {
			value: String,
			focused: {
				type: Boolean,
				default: false
			}
		},
		watch: {
			focused() {
				this.focusState = this.focused
			},
		},
		mounted () {
		    if (this.focused) {
				this.focusState = true
			}
	    },
		methods: {
			handleFocus () {
				this.focusState = true
			},
			handleBlur (e) {
				this.$emit('input', e.target.value)
				if (e.target.value.length) {
					this.$emit('handleChange', e.target.value)
				}
				this.focusState = false
			},
			toDel () {
				this.$emit('input', '')
			},
			handleSend (e) {
				this.$emit('input', e.target.value)
				if (e.target.value.length) {
					this.$emit('handleChange', e.target.value)
				}
			}
		}
	}
</script>

<style lang="stylus" scoped>
@import '../common/style/mixin.styl';
.scan_wraper
	position relative
	_wh(100%, 80rpx)
	border: 1px solid #dcdfe6;
	background-color: #fff;
	border-radius: 10rpx;
	padding: 0 10rpx
.search_input
	height 80rpx;
	_font(28rpx, 80rpx, #606266,,)
	border: 0;
	background-color: transparent;
</style>