init

components/SearchBox.vue

@@ -0,0 +1,73 @@
+<template>
+	<view class="search_wraper">
+		<input 
+		type="text" 
+		class="filter_input pdr120" 
+		confirm-type="go"
+		:value="value"
+		:focus="focusState"
+		@focus="handleFocus"
+		@blur="handleBlur"
+		@confirm="handleSend">
+		<view class="zd-row buttons_wraper">
+			<uni-icons v-show="value !== '' && value !== null && value !== undefined" class="pdr10" type="clear" size="24" color="#666" @tap="toDel"></uni-icons>
+			<uni-icons type="scan" size="22" :color="focusState ? '#ff6a00' : '#4e6ef2'" @tap="focusState=true"></uni-icons>
+		</view>
+	</view>
+</template>
+
+<script>
+	import permision from "@/utils/permission.js"
+	export default {
+		data() {
+			return {
+				focusState: false
+			};
+		},
+		model: {
+			prop: 'value',
+			event: 'input'
+		},
+		props: {
+			value: String
+		},
+		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', '')
+				this.$emit('handleDel')
+			},
+			handleSend (e) {
+				this.$emit('input', e.target.value)
+				if (e.target.value.length) {
+					this.$emit('handleChange', e.target.value)
+				}
+			}
+		}
+	}
+</script>
+
+<style lang="stylus">
+@import '../common/style/mixin.styl';
+.search_wraper
+	position relative
+	_wh(100%, 80rpx)
+.pdr120
+	padding-right: 120rpx;
+.buttons_wraper
+	position absolute
+	top 0
+	right 10rpx
+	_wh(auto, 80rpx)
+.pdr10
+	padding-right 10rpx
+</style>