138 lines
3.5 KiB
Vue
138 lines
3.5 KiB
Vue
|
<template>
|
||
|
|
<div class="bottom-filter-tip">
|
||
|
|
<div class="filter-label txtjustify">{{label}}</div>
|
||
|
|
<div class="fxcol mgl20 relative">
|
||
|
|
<input
|
||
|
|
type="text"
|
||
|
|
class="filter-input filter-scan-input search_input"
|
||
|
|
ref="scaninput"
|
||
|
|
:placeholder="keyCode === '' ? placeholder : keyCode"
|
||
|
|
:disabled="disabled"
|
||
|
|
:value="value"
|
||
|
|
@focus="handleFocus($event)"
|
||
|
|
@blur="handleBlur($event)"
|
||
|
|
@input="handleChange($event)">
|
||
|
|
<div class="button_box">
|
||
|
|
<button class="search_box_icon fxcol" @click="handleScan">
|
||
|
|
<span class="iconfont scan_icon" :class="{'scan_icon_checked': type === true}"></span>
|
||
|
|
</button>
|
||
|
|
<button class="search_box_icon fxcol" @click="handleKey">
|
||
|
|
<span class="iconfont key_icon" :class="{'key_icon_checked': type === false}"></span>
|
||
|
|
</button>
|
||
|
|
<button v-show="seaShow === true" class="search_box_icon fxcol" @click="handleSearch">
|
||
|
|
<span class="iconfont search_icon" :class="{'key_icon_checked': type === false}"></span>
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
export default {
|
||
|
|
name: 'SearchBox',
|
||
|
|
model: {
|
||
|
|
prop: 'value',
|
||
|
|
event: 'input'
|
||
|
|
},
|
||
|
|
props: {
|
||
|
|
value: String,
|
||
|
|
label: String,
|
||
|
|
focused: {
|
||
|
|
type: Boolean,
|
||
|
|
default: false
|
||
|
|
},
|
||
|
|
seaShow: {
|
||
|
|
type: Boolean,
|
||
|
|
default: true
|
||
|
|
},
|
||
|
|
keyCode: {
|
||
|
|
type: String,
|
||
|
|
default: ''
|
||
|
|
},
|
||
|
|
disabled: {
|
||
|
|
type: Boolean,
|
||
|
|
default: false
|
||
|
|
}
|
||
|
|
},
|
||
|
|
data () {
|
||
|
|
return {
|
||
|
|
placeholder: '',
|
||
|
|
type: '',
|
||
|
|
cur: ''
|
||
|
|
}
|
||
|
|
},
|
||
|
|
mounted () {
|
||
|
|
if (!this.focused) this.handleScan()
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
handleScan () {
|
||
|
|
this.$refs.scaninput.focus()
|
||
|
|
this.placeholder = '请扫码键输入'
|
||
|
|
this.type = true
|
||
|
|
this.$emit('input', '')
|
||
|
|
},
|
||
|
|
handleKey () {
|
||
|
|
this.$refs.scaninput.focus()
|
||
|
|
this.placeholder = '请键盘输入'
|
||
|
|
this.type = false
|
||
|
|
// this.$emit('input', this.cur)
|
||
|
|
},
|
||
|
|
handleFocus ($event) {
|
||
|
|
this.cur = $event.target.value
|
||
|
|
this.placeholder = '请扫码键输入'
|
||
|
|
this.type = false
|
||
|
|
// $event.target.value = ''
|
||
|
|
// this.$emit('input', $event.target.value)
|
||
|
|
},
|
||
|
|
handleBlur ($event) {
|
||
|
|
this.type = ''
|
||
|
|
this.placeholder = ''
|
||
|
|
// if ($event.target.value === '') {
|
||
|
|
// $event.target.value = this.cur
|
||
|
|
// }
|
||
|
|
this.$emit('input', $event.target.value)
|
||
|
|
},
|
||
|
|
handleChange ($event) {
|
||
|
|
if ($event.target.value) {
|
||
|
|
if (this.type) {
|
||
|
|
this.cur = $event.target.value.split('##')[0]
|
||
|
|
let _this = this
|
||
|
|
setTimeout(() => {
|
||
|
|
_this.$emit('input', this.cur)
|
||
|
|
_this.$emit('handleChange', this.cur, true)
|
||
|
|
_this.$emit('getScanTxt', $event.target.value)
|
||
|
|
}, 20)
|
||
|
|
this.$refs.scaninput.blur()
|
||
|
|
} else if (!this.type) {
|
||
|
|
this.cur = $event.target.value
|
||
|
|
this.$emit('input', this.cur)
|
||
|
|
this.$emit('handleChange', this.cur, false)
|
||
|
|
} else {
|
||
|
|
this.cur = $event.target.value
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
handleSearch () {
|
||
|
|
this.$emit('handleChange', this.cur, true)
|
||
|
|
this.$refs.scaninput.blur()
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="stylus" scoped>
|
||
|
|
@import '~@style/mixin'
|
||
|
|
.search_input
|
||
|
|
padding-right 2.1rem
|
||
|
|
.button_box
|
||
|
|
_fj()
|
||
|
|
position absolute
|
||
|
|
top 50%
|
||
|
|
transform translateY(-50%)
|
||
|
|
right 1px
|
||
|
|
// height .9rem
|
||
|
|
.search_box_icon
|
||
|
|
_wh(.7rem, 100%)
|
||
|
|
background-color #fff
|
||
|
|
</style>
|