78 lines
1.6 KiB
Vue
78 lines
1.6 KiB
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"
|
|
@tap="handleFocus">
|
|
<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
|
|
},
|
|
methods: {
|
|
handleFocus () {
|
|
this.focusState = true
|
|
// setTimeout(() => {
|
|
// uni.hideKeyboard()
|
|
// }, 300)
|
|
},
|
|
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)
|
|
setTimeout(() => {
|
|
uni.hideKeyboard()
|
|
}, 300)
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</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>
|